I am trying to make a simple layout in HTML and CSS that got 100% fullscreen height where the two columns are at the same height, no matter how much their contents are in them.
As now, the scrollable area pauses at the height of the screen, not the page. Please help me get this job. I have tried almost every tutorial that I can find.
Markup.
<html>
<body>
<div id="container">
<div id="sidebar"></div>
<div id="content"></div>
</div>
</body>
</html>
CSS code
html,body {
height: 100%;
}
#container {
width: 600px;
height: 100%;
background-color: black;
}
#sidebar {
float: left;
width: 200px;
height: 100%;
background-color: blue;
}
#content {
float: left;
width: 400px;
height: 100%;
background-color: red;
}
source
share