I know that there might be a lot of questions about this matter but none of them really helped me with my problem, I've been trying to fix this over and over again with no results.
What I'm trying to do is pretty simple, I have one div called container, and inside of it there are two more divs, menuand content.
I want the menu div to be on the right side of the page and get the full height (100%) from container but it's not working.
I tried setting the bodyheight to 100% but it also doesn't work, it only works if I set a height using px (5000px for example), but I don't want it to be with a fixed height.
CSS / HTML
html, body {
height: auto;
}
body {
margin: 0;
padding: 0;
overflow-y: scroll;
}
.container {
float: right;
width: 100%;
height: 100%;
background-color: grey;
overflow: hidden;
}
.menu {
float: right;
width: 250px;
height: 100%;
background-color: green;
}
.content {
width: 100%;
height: 100%;
font-family: Tahoma;
font-size: 36px;
font-weight: bold;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<div class="container">
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="content">
<p align="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dui mi, blandit eu purus vestibulum, fermentum semper tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor massa id urna iaculis aliquam. Donec sed luctus neque. Vestibulum neque quam, porttitor sit amet vehicula et, vehicula id felis. Nulla vestibulum imperdiet sodales. Nunc dapibus nisl non felis porta, sit amet tincidunt est auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet eget arcu nec vehicula. Aenean neque enim, gravida ac elit vel, scelerisque dignissim mi. Donec iaculis commodo nisi in faucibus.
Nam venenatis elementum sem sit amet accumsan. Fusce eget auctor nulla. Integer at mauris non velit pharetra gravida in a dui. Nam posuere odio sit amet tellus egestas dictum. Pellentesque sagittis diam vitae porta euismod. Nam pulvinar odio vel nibh lacinia faucibus. Mauris consectetur faucibus urna quis iaculis. Suspendisse quam purus, suscipit id feugiat condimentum, ullamcorper ac lectus. Sed ut egestas velit. Aenean sagittis ipsum non dui ultricies, ut ornare dolor tempor. Vivamus ac condimentum urna. Nunc eu odio vitae justo dictum varius at quis ante. Etiam a orci vitae est lobortis semper ac ac nisi. Suspendisse egestas, lorem vitae molestie fermentum, erat dui aliquam enim, id tristique mi erat non lacus. Sed nec lectus dolor.
Vivamus vel ante ante. Ut commodo, dolor in laoreet interdum, leo nisi consequat nisl, sed feugiat velit risus varius enim. Sed auctor nibh eget orci laoreet pulvinar. Cras ornare convallis libero. Etiam felis mauris, volutpat eget lacus vel, aliquam iaculis dui. Nulla felis massa, scelerisque eu lectus non, porttitor consequat augue. Mauris mauris nibh, consequat quis odio quis, bibendum malesuada dui. Phasellus sapien libero, eleifend eu aliquam vel, ultrices non massa. Pellentesque cursus ex elit, at rutrum purus pharetra in. Sed faucibus feugiat eros non dictum. Donec ante ante, dignissim nec dignissim et, elementum at nulla. Aliquam interdum, est mollis tempor faucibus, dui sapien euismod sem, eleifend ultrices purus eros ac turpis.
Etiam eget odio vitae quam pretium finibus. In feugiat quam non felis blandit posuere. Integer nec varius risus. Donec aliquet mi eu risus sollicitudin fermentum id vulputate enim. Integer quis congue augue. Suspendisse potenti. Nam lobortis turpis at nisl pretium, a ullamcorper dui euismod. Nam aliquam quam ac efficitur sodales. Curabitur cursus urna in arcu vehicula, sed vehicula purus mollis.
In id lacus vel mi ornare rhoncus. In libero nisi, dictum eu aliquet ut, facilisis id diam. Vestibulum sollicitudin neque vitae diam faucibus, quis lobortis velit volutpat. Sed risus mauris, semper quis feugiat a, accumsan vitae velit. Vivamus viverra, lacus vel malesuada tristique, urna purus euismod augue, at laoreet lorem nunc in sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam vitae feugiat felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a semper eros, id cursus ipsum. Maecenas eu libero hendrerit, euismod lectus viverra, ultrices quam. Quisque tristique nunc non turpis convallis, id ultricies urna volutpat. Nullam in quam erat. Phasellus vitae euismod ligula, vitae dictum lectus. Maecenas id feugiat leo.
</p>
</div>
</div>
</body>
</html>
