Reputation: 149
CSS rest of the page
I have a page with one navigationbar and one div (wrapper). Now i want that the div (wrapper) fill the rest of the page with a background-color and put the text in the middle (vertical).
Here is my Code:
*{
margin: 0px;
padding: 0px;
}
html, body{
height: 100%;
}
.wrapper{
font-size: 32px;
color: white;
height: auto;
vertical-align: middle;
background-color: rgb(25, 81, 118);
text-align: justify;
}
.text{
width: 70%;
margin-right: auto;
margin-left: auto;
}
nav{
width: 100%;
background-color: white;
}
ul{
font-size: 0px;
}
li{
display: inline-block;
}
a{
display: block;
padding: 10px 20px;
color: rgb(25, 81, 118);
transition: all 0.5s;
font-size: 22px;
}
a:hover{
background-color: rgb(25, 81, 118);
color: white;
}<!DOCTYPE html>
<html>
<head>
<link href="css.css" type="text/css" rel="stylesheet">
<meta charset="utf-8">
</head>
<body>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</nav>
<div class="wrapper">
<p class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>Upvotes: 2
Views: 527
Answers (4)
Reputation: 1523
You can use CSS Flex Layout to solve this problem. Put the vendor prefixes by yourself.
*{
margin: 0px;
padding: 0px;
}
html, body{
height: 100%;
}
body {
display: flex; /* <-------- Added this */
flex-direction: column; /* <-------- Added this */
}
.wrapper{
flex: 1; /* <-------- Added this */
font-size: 32px;
color: white;
height: auto;
vertical-align: middle;
background-color: rgb(25, 81, 118);
text-align: justify;
}
.text{
width: 70%;
margin-right: auto;
margin-left: auto;
}
nav{
width: 100%;
background-color: white;
}
ul{
font-size: 0px;
}
li{
display: inline-block;
}
a{
display: block;
padding: 10px 20px;
color: rgb(25, 81, 118);
transition: all 0.5s;
font-size: 22px;
}
a:hover{
background-color: rgb(25, 81, 118);
color: white;
}<!DOCTYPE html>
<html>
<head>
<link href="css.css" type="text/css" rel="stylesheet">
<meta charset="utf-8">
</head>
<body>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</nav>
<div class="wrapper">
<p class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>Upvotes: 0
Reputation: 33218
Add display table and height: 100% to element with class .wrapper and display table-cell and veritcal-align: middle to element with class .text:
*{
margin: 0px;
padding: 0px;
}
html, body{
height: 100%;
}
.wrapper{
display: table;/*add display table*/
height: 100%;/*add height 100%*/
font-size: 32px;
color: white;
vertical-align: middle;
background-color: rgb(25, 81, 118);
text-align: justify;
}
.text{
width: 70%;
margin-right: auto;
margin-left: auto;
display: table-cell;/*add display table-cell*/
vertical-align: middle;/*add vertical align middle*/
}
nav{
width: 100%;
background-color: white;
}
ul{
font-size: 0px;
}
li{
display: inline-block;
}
a{
display: block;
padding: 10px 20px;
color: rgb(25, 81, 118);
transition: all 0.5s;
font-size: 22px;
}
a:hover{
background-color: rgb(25, 81, 118);
color: white;
}<!DOCTYPE html>
<html>
<head>
<link href="css.css" type="text/css" rel="stylesheet">
<meta charset="utf-8">
</head>
<body>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</nav>
<div class="wrapper">
<p class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>Upvotes: 3
Reputation: 343
You can set the tag's background color to the navy, and since the background color for your nav bar is already set to white, it will override the blue background for that div.
body {background-color: rgb(25, 81, 118);}
It is advised that anything you have set in your wrapper div will have that background color, so if you continue to add more content, the navy background will continue to fill the page. Considering there is only one paragraph, the wrapper ends where the content ends leaving a large white space when viewing.
Upvotes: 0
Reputation: 1440
on your css do:
body {
background-color: white;
}
this will fill all the background with the color you want.
.wrapper {
margin-top: auto;
margin-bottom: auto;
}
this will center the div with the class wrapper
Upvotes: 3