How to divide a div into sections (working with min-height 100%)?
Question
I am using the following lay-out: http://peterned.home.xs4all.nl/examples/csslayout1.html
Right now, I'm trying to create something like this: http://imgur.com/P64BojY
What I would like to have is a header, two divs in the middle of the page and a fixed footer. All of the divs (except for the footer) should be of the same size.
Basically, what I'm trying to do is to divide the central div (from the lay-out I've mentioned before) into two divs of the same size, I need the footer to stay at the bottom of the page though.
For my other pages I'll need to be using the same lay-out, except for the bottom div, which has to be divided in 3 divs, like this: http://imgur.com/XuxxlAE
I'm not sure how to do any of this, since I'm working with the min-height 100%...
So yeah... any help would be appreciated! Thanks
2 answers
solution1
0 2014-03-21 12:22:15
is this what you want? easier to just show you a jsfiddle so you check the css needed.
<div class="container">
<div class="containerDivs">
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
</div>
<div class="footer">
footer
</div>
</div>
solution2
0 2014-03-21 13:24:17
Try this solution, I have replaced div content with two divs with class content
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style>
html, body {
background: none repeat scroll 0 0 #808080;
color: #666666;
font-family: arial,sans-serif;
font-size: small;
height: 100%;
margin: 0;
padding: 0;
}
h1 {
font: 1.5em georgia,serif;
margin: 0.5em 0;
}
h2 {
font: 1.25em georgia,serif;
margin: 0 0 0.5em;
}
h1, h2, a {
color: #FFA500;
}
p {
line-height: 1.5;
margin: 0 0 1em;
}
div#container {
background: none repeat scroll 0 0 #F0F0F0;
height: auto !important;
margin: 0 auto;
min-height: 100%;
position: relative;
width: 750px;
}
div#header {
background: url("../csslayout.gif") no-repeat scroll 98% 10px #DDDDDD;
border-bottom: 6px double #808080;
padding: 1em;
}
div#header p {
font-size: 1.1em;
font-style: italic;
margin: 0;
}
#a{padding: 1em 1em 0em 1em;}
#b{padding: 0em 1em 6em 1em;}
div#content p {
padding: 0 1em;
text-align: justify;
}
div#footer {
background: none repeat scroll 0 0 #DDDDDD;
border-top: 6px double #808080;
bottom: 0;
position:absolute;
width: 100%;
}
div#footer p {
margin: 0;
padding: 1em;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>CSS layout: 100% height with header and footer</h1>
<p>Sometimes things that used to be really simple with tables can still appear pretty hard with CSS. This layout for instance would consist of 3 cells; two with a fixed height, and a third one in the center filling up the remaining space. Using CSS, however, you have to take a different approach.</p>
</div>
<!--div content duplicated-->
<div class="content" id="a">
<h2>Min-height</h2>
<p>Lorem ipsum...</p>
</div>
<div class="content" id="b">
<h2>Min-height</h2>
<p>Lorem ipsum...</p>
</div>
<div id="footer">
<p>
This footer is absolutely positioned to bottom:0; of #container. The padding-bottom of #content keeps me from overlapping it when the page is longer than the viewport.
</p>
</div>
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.