#ui is expanding to fill 100% of the available height. But since there is no content and nothing with padding or margin, both <html> and <body> are collapsing to zero height. Add:
html,body{ height: 100%; }
Solution 1 :
Solution 2 :
Simply replace height: 100% with height: 100vh in your #ui styles. It will give your grid container the height of 100% of the viewport.
Obs: I added a gap between the grid elements just to make their limits visible.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#ui {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
height: 100vh;
gap: 1rem;
}
.layout-block {
background-color: #4472C4;
border: 3px;
}
</style>
</head>
<body>
<div id="ui">
<div id="section-1" class="layout-block"></div>
<div id="section-2" class="layout-block"></div>
<div id="section-3" class="layout-block"></div>
</div>
</body>
</html>Problem :
Please excuse the naïve html newbie question:
I am making an html layout and I want to start with no placeholder text. Just empty elements dividing the screen into three sections, into which I’ll insert content later.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#ui {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
height: 100%;
}
.layout-block {
background-color: #4472C4;
margin: 3px;
}
</style>
</head>
<body>
<div id="ui">
<div id="section-1" class="layout-block"></div>
<div id="section-2" class="layout-block"></div>
<div id="section-3" class="layout-block"></div>
</div>
</body>
</html>
What I expect is something like this:
What I get is this:
I understand that is because the elements’ heights are collapsing to zero, due to the absence of any content. But what do I do to fix this?
I would like the grid container (with the id ui) to expand to 100% of the screen height, and I’d like my empty divs to expand in height to fill it.
Many thanks for any help!
Comments
Comment posted by MTilsted
min-height:300px; for example
Comment posted by Leo Orientis
@MTilsted, yes, that makes the height 300px, but it does not make it take up 100% of the available screen. PS: I have tried
Comment posted by stackoverflow.com/questions/1622027/…
Thanks to whomever associated this question with