CSS: How to get the "main text" element to stretch it's properties to the bottom of the page
I have the following XHTML page followed by my intended CSS and would like the main-text div to go all the way to the bottom of the page so that footer and footer2 appear at the bottom of the page and the main-text background carries through all the way to the bottom.
(N.B. The top margin and padding of "main-text" was intended as is)
Everything has been included:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="core-sheet.css">
<title>MySite | Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="top-image"></div>
<div id="content">
<div id="left-nav-links">
<ul>
<li><a href="index.html" >Home</a></li>
<li><a href="thePages/GalerieImages/gallery.html">Gallery</a></li>
<li><a href="thePages/contact.html">Feedback</a>
</ul></div>
<div id="main-text">
<!-- 'Welcome' text, etc. -->
<h1>Welcome to MySite!</h1>
<h2>Introduction</h2>
<p>Text Goes Here</p>
<p class="footer">
<a href="index.html">MySite</a> | <a href="thePages/GalerieImages/gallery.html">Gallery</a> | <a href="thePages/contact.html">Feedback</a></p>
<p class="footer2">
<a href="thePages/sitemap.html">Site Map</a> | <a href="thePages/imagemap.html">Image Map</a> | <a href="thePages/sources.html">Source Log</a></p>
</div>
</div>
</body>
</html>
And Here's the main style sheet (NB: filename is specified above as "core-sheet.css"):
/*Main Style Sheet*/
/* --------------- overview of page --------------- */
body {
margin: 0;
background-color: #AAAAAA;
color: #000000;
font-family: Arial, Tahoma, Helvetica, sans-serif;
font-size: 1.1em;
letter-spacing: 1px;
}
/* --------------- define body elements and style of page --------------- */
/* --------------- styles for all headings --------------- */
h1, h2 {
margin: 0;
padding: 0;
font-weight: normal;
color: #000000;
}
/* --------------- styles for individual headings --------------- */
h1 {
font-size: 2em;
}
h2 {
font-size: 1.4em;
}
/* --------------- paragraph style --------------- */
p {
font-size: 0.8em;
text-align: left;
line-height: 1.2em;
color: #000000;
padding-right: 200px;
line-height: 120%;
}
/* --------------- page footers --------------- */
p.footer {
font-size: 0.7em;
text-align: 开发者_如何学Go center;
font-weight: bold;
color: #000000;
}
p.footer2 {
font-size: 0.6em;
text-align: center;
font-weight: bold;
color: #000000;
}
/* --------------- sidebar link positioning properties --------------- */
#left-nav-links {
position: absolute;
line-height: 140%;
}
/* --------------- main text area of page --------------- */
#main-text {
background-color: #ffffff;
height: 100%;
border-left: 1px #000000 solid;
padding-top: 50px;
margin-left: 198px;
padding-left: 50px;
}
/* --------------- lay out links neatly --------------- */
#top-image {
height: 180px;
background-position: center top;
background-image: url(../images/MYZE.gif);
}
Here is the css needed,
/*Main Style Sheet*/
/* --------------- overview of page --------------- */
* {
-webkit-box-sixing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
height: 100%
}
body {
margin: 0;
background-color: #AAAAAA;
color: #000000;
font-family: Arial, Tahoma, Helvetica, sans-serif;
font-size: 1.1em;
letter-spacing: 1px;
display: table;
width: 100%;
}
/* --------------- define body elements and style of page --------------- */
/* --------------- styles for all headings --------------- */
h1, h2 {
margin: 0;
padding: 0;
font-weight: normal;
color: #000000;
}
/* --------------- styles for individual headings --------------- */
h1 {
font-size: 2em;
}
h2 {
font-size: 1.4em;
}
/* --------------- paragraph style --------------- */
p {
font-size: 0.8em;
text-align: left;
line-height: 1.2em;
color: #000000;
padding-right: 200px;
line-height: 120%;
}
/* --------------- page footers --------------- */
p.footer {
font-size: 0.7em;
text-align: center;
font-weight: bold;
color: #000000;
}
p.footer2 {
font-size: 0.6em;
text-align: center;
font-weight: bold;
color: #000000;
}
/* --------------- sidebar link positioning properties --------------- */
#left-nav-links {
position: absolute;
line-height: 140%;
}
/* --------------- main text area of page --------------- */
#main-text {
background-color: #ffffff;
height: 100%;
border-left: 1px #000000 solid;
padding-top: 50px;
margin-left: 198px;
padding-left: 50px;
}
/* --------------- lay out links neatly --------------- */
#top-image {
display: table-row;
height: 180px;
background-position: center top;
background-image: url(../images/MYZE.gif);
}
#content {
height: 100%
}
http://codepen.io/raunay/pen/uFbHK
One of the solutions here is to use table.
To tackle this, set the remaining height is to display:table for the container and display: table-row for the child. This way, if the container was set to be 100%, and you specify the display: table-row for the 1st child element to be fixed height and 2nd child element to be height:100%, the 2nd child element will have the remaining height needed to fill in the entire container.
加载中,请稍侯......
精彩评论