25aa04e2e7
* chore(curriculum): accessibility-quiz * chore(curriculum): cafe-menu * chore(curriculum): ferris-wheel * chore(curriculum): fix ferris-wheel tests * chore(curriculum): colored-markers * chore(curriculum): photo-gallery * chore(curriculum): magazine * chore(curriculum): penguin * chore(curriculum): city-skyline * chore(curriculum): registration-form * chore(curriculum): picasso-painting * chore(curriculum): balance-sheet * chore(curriculum): piano * chore(curriculum): rothko-painting * fix: title min 15 chars
1.4 KiB
1.4 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 5d822fd413a79914d39e98cf | Step 7 | 0 | step-7 |
--description--
You can see the body (it's the inner-most box on your page); the box around it is the html element. Make your body fill the whole viewport by giving it a height of 100vh. Remove the default margin from the body by setting the margin to 0. Finally, set the overflow property to hidden to hide any scroll bars that appear when something extends past the viewport.
--hints--
You should use the body selector.
assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
Your body should have a height of 100vh.
const bodyStyles = new __helpers.CSSHelp(document).getStyle('body');
assert.equal(bodyStyles?.height, '100vh');
Your body should have a margin of 0.
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
Your body should have the overflow property set to hidden.
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden');
--seed--
--seed-contents--
<!DOCTYPE html>
<html>
<head>
<title>City Skyline</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
* {
border: 1px solid black;
box-sizing: border-box;
}
--fcc-editable-region--
--fcc-editable-region--