Kolombooo
Reputation: 67
How to stretch the div to all the height of the page?
I ran into an issue while using CSS.
I have two divs (Sidebar "lbar" and Content "rfeed") These two divs are supposed to be stretched to the very bottom of the page. Well, they are now only to the point where the text ends as you can see in the screenshot. I tried to fix it, but i did not find anyone to have the same issue as i do. I think it's because of the flex display, but i need to use it.
This is my code
* {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
html, body {
height: 100%;
}
.feed {
display: flex;
}
.lbar {
flex: 20%;
background-color: #333333;
color: white;
padding: 15px;
min-height: 100%;
float: left;
}
.rfeed {
flex: 80%;
background-color: #4d4d4d;
padding: 10px;
padding-left: 15px;
color: white;
}
img {
max-width: 100%;
height: auto;
}
.name {
font-weight: 900;
font-size: 40px;
}
.rank {
background-color: #6321ff;
padding: 5px;
text-align: center;
border-radius: 10px;
}
button {
background-color: #0063db;
border: 5px #0073e6 solid;
padding: 5px;
font-weight: 900;
color: white;
border-radius: 30px;
width: 200px;
font-size: 19px;
background: linear-gradient(to left, #0063db 50%, #0073e6 50%) right;
background-size: 200%;
transition: .5s ease-out;
}
button:hover {
background-position: left;
cursor: pointer;
}
button:active {
transform: translateY(5px);
}
.topmenu {
background-color: #333333;
padding-top: 20px;
padding-bottom: 20px;
border-radius: 3px;
width: 100%;
margin: 0;
text-align: center;
}
.menuitem {
margin: 20px;
}
.menuitem:hover {
text-decoration: overline;
cursor: pointer;
}
.menuactive {
background-color: #0063db;
}
table {
margin-top: 50px;
}
table, th, td {
border-bottom: 1px solid #333333;
border-top: 1px solid #333333;
border-collapse: collapse;
padding: 5px;
}
a {
color: white;
text-decoration: none;
}
th {
text-align: left;
}
td {
cursor: pointer;
}<!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
<meta charset="utf-8">
<title>Panel - Podpora │ Minex</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
<style media="screen">
</style>
</head>
<body>
<div class="content">
<div class="feed">
<div class="lbar">
<img src="https://cravatar.eu/helmavatar/cyan/190.png">
<p class="name">Content</p>
<p class="rank">Content</p>
<button type="button" name="logout" style="margin-top: 90px;">Content</button>
<button type="button" name="changepass" style="margin-top: 20px;">Content</button>
<button type="button" name="updateskin" style="margin-top: 20px;">Content</button>
</div>
<hr style="margin: 0px; color: #191919;">
<div class="rfeed">
<div class="topmenu">
<b class="menuitem"><a href="../index.html">Content</a></b>
<b class="menuitem" style="background-color: #0063db; padding: 3px; border-radius: 5px; padding-left: 10px; padding-right: 10px; border: 5px #0073e6 solid;"><a href="index.html">Content</a></b>
<b class="menuitem"><a href="content/index.html">Content</a></b>
</div>
<table style="width:100%">
<tr>
<th>Content</th><th>Content</th><th>Content</th><th>Content</th><th>Content</th>
</tr>
<tr><td>Content</td><td>Content</td><td>Content</td> <td>Content</td><td>Content</td></tr>
<tr><td>Content</td><td>Content</td><td>Content</td> <td>Content</td><td>Content</td></tr>
<tr><td>Content</td><td>Content</td><td>Content</td> <td>Content</td><td>Content</td></tr>
</table>
</div>
</div>
</div>
</body>
</html>Upvotes: 2
Views: 57
Answers (2)
Rolv Apneseth
Reputation: 2118
You can set .content and .feed to have a height: 100%, I just included them with html and body:
html, body, .content, .feed {
height: 100%;
}
And also remove the min-height from .lbar. The final code should look like this:
* {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
html, body, .content, .feed {
height: 100%;
}
.feed {
display: flex;
}
.lbar {
flex: 20%;
background-color: #333333;
color: white;
padding: 15px;
float: left;
}
.rfeed {
flex: 80%;
background-color: #4d4d4d;
padding: 10px;
padding-left: 15px;
color: white;
}
img {
max-width: 100%;
height: auto;
}
.name {
font-weight: 900;
font-size: 40px;
}
.rank {
background-color: #6321ff;
padding: 5px;
text-align: center;
border-radius: 10px;
}
button {
background-color: #0063db;
border: 5px #0073e6 solid;
padding: 5px;
font-weight: 900;
color: white;
border-radius: 30px;
width: 200px;
font-size: 19px;
background: linear-gradient(to left, #0063db 50%, #0073e6 50%) right;
background-size: 200%;
transition: .5s ease-out;
}
button:hover {
background-position: left;
cursor: pointer;
}
button:active {
transform: translateY(5px);
}
.topmenu {
background-color: #333333;
padding-top: 20px;
padding-bottom: 20px;
border-radius: 3px;
width: 100%;
margin: 0;
text-align: center;
}
.menuitem {
margin: 20px;
}
.menuitem:hover {
text-decoration: overline;
cursor: pointer;
}
.menuactive {
background-color: #0063db;
}
table {
margin-top: 50px;
}
table, th, td {
border-bottom: 1px solid #333333;
border-top: 1px solid #333333;
border-collapse: collapse;
padding: 5px;
}
a {
color: white;
text-decoration: none;
}
th {
text-align: left;
}
td {
cursor: pointer;
}<!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
<meta charset="utf-8">
<title>Panel - Podpora │ Minex</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
<style media="screen">
</style>
</head>
<body>
<div class="content">
<div class="feed">
<div class="lbar">
<img src="https://cravatar.eu/helmavatar/cyan/190.png">
<p class="name">Content</p>
<p class="rank">Content</p>
<button type="button" name="logout" style="margin-top: 90px;">Content</button>
<button type="button" name="changepass" style="margin-top: 20px;">Content</button>
<button type="button" name="updateskin" style="margin-top: 20px;">Content</button>
</div>
<hr style="margin: 0px; color: #191919;">
<div class="rfeed">
<div class="topmenu">
<b class="menuitem"><a href="../index.html">Content</a></b>
<b class="menuitem" style="background-color: #0063db; padding: 3px; border-radius: 5px; padding-left: 10px; padding-right: 10px; border: 5px #0073e6 solid;"><a href="index.html">Content</a></b>
<b class="menuitem"><a href="content/index.html">Content</a></b>
</div>
<table style="width:100%">
<tr>
<th>Content</th><th>Content</th><th>Content</th><th>Content</th><th>Content</th>
</tr>
<tr><td>Content</td><td>Content</td><td>Content</td> <td>Content</td><td>Content</td></tr>
<tr><td>Content</td><td>Content</td><td>Content</td> <td>Content</td><td>Content</td></tr>
<tr><td>Content</td><td>Content</td><td>Content</td> <td>Content</td><td>Content</td></tr>
</table>
</div>
</div>
</div>
</body>
</html>Upvotes: 1
Spectric
Reputation: 31987
Set min-height for .lbar to calc(100vh - 30px). We subtract 30px to account for the extra padding.
* {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
html,
body {
height: 100%;
}
.feed {
display: flex;
}
.lbar {
flex: 20%;
background-color: #333333;
color: white;
padding: 15px;
min-height: calc(100vh - 30px);
float: left;
}
.rfeed {
flex: 80%;
background-color: #4d4d4d;
padding: 10px;
padding-left: 15px;
color: white;
}
img {
max-width: 100%;
height: auto;
}
.name {
font-weight: 900;
font-size: 40px;
}
.rank {
background-color: #6321ff;
padding: 5px;
text-align: center;
border-radius: 10px;
}
button {
background-color: #0063db;
border: 5px #0073e6 solid;
padding: 5px;
font-weight: 900;
color: white;
border-radius: 30px;
width: 200px;
font-size: 19px;
background: linear-gradient(to left, #0063db 50%, #0073e6 50%) right;
background-size: 200%;
transition: .5s ease-out;
}
button:hover {
background-position: left;
cursor: pointer;
}
button:active {
transform: translateY(5px);
}
.topmenu {
background-color: #333333;
padding-top: 20px;
padding-bottom: 20px;
border-radius: 3px;
width: 100%;
margin: 0;
text-align: center;
}
.menuitem {
margin: 20px;
}
.menuitem:hover {
text-decoration: overline;
cursor: pointer;
}
.menuactive {
background-color: #0063db;
}
table {
margin-top: 50px;
}
table,
th,
td {
border-bottom: 1px solid #333333;
border-top: 1px solid #333333;
border-collapse: collapse;
padding: 5px;
}
a {
color: white;
text-decoration: none;
}
th {
text-align: left;
}
td {
cursor: pointer;
}<!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
<meta charset="utf-8">
<title>Panel - Podpora │ Minex</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
<style media="screen">
</style>
</head>
<body>
<div class="content">
<div class="feed">
<div class="lbar">
<img src="https://cravatar.eu/helmavatar/cyan/190.png">
<p class="name">Content</p>
<p class="rank">Content</p>
<button type="button" name="logout" style="margin-top: 90px;">Content</button>
<button type="button" name="changepass" style="margin-top: 20px;">Content</button>
<button type="button" name="updateskin" style="margin-top: 20px;">Content</button>
</div>
<hr style="margin: 0px; color: #191919;">
<div class="rfeed">
<div class="topmenu">
<b class="menuitem"><a href="../index.html">Content</a></b>
<b class="menuitem" style="background-color: #0063db; padding: 3px; border-radius: 5px; padding-left: 10px; padding-right: 10px; border: 5px #0073e6 solid;"><a href="index.html">Content</a></b>
<b class="menuitem"><a href="content/index.html">Content</a></b>
</div>
<table style="width:100%">
<tr>
<th>Content</th>
<th>Content</th>
<th>Content</th>
<th>Content</th>
<th>Content</th>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>Upvotes: 1
Related Questions
- CSS Div stretch 100% page height
- How to stretch full height div inside container the scroll?
- div stretch 100% page height regardless of content
- How to stretch div from top to the bottom of the page?
- How can I stretch a div to 100% page height?
- How can I make a div expand to the height of the page?
- How do I stretch a div to be the height of the document body, not the viewport? (included code)
- How to stretch a div vertically and horizontally to occupy all the space?
- Make div stretch to height of content, not height of page
- extend div height to entire webpage