Question

我使用以下布局：http://peterned.home.xs4all.nl/examples/csslayout1.html

现在，我正试图创建这样的内容：http://imgur.com/P64BojY

我想要的是一个标题，页面中间的两个div和一个固定的页脚。所有div（除了页脚）应该具有相同的大小。

基本上，我试图做的是将中央div（从之前提到的布局）分成两个相同大小的div，我需要页脚留在但是页面的底部。

对于我的其他页面，我需要使用相同的布局，除了底部div，必须分成3个div，如下所示：http://imgur.com/XuxxlAE

我不知道如何做到这一点，因为我正在使用最小高度100％......

所以是的...任何帮助将不胜感激！感谢

Answer 1

这是你想要的吗？更容易只是向您展示一个jsfiddle所以你检查所需的CSS。

<div class="container">
<div class="containerDivs">
    <div class="div1">
           div1
    </div>    
    <div class="div2">
            div2
    </div> 
</div>     

<div class="footer">
        footer
</div>

</div>

http://jsfiddle.net/QcG7a/

Answer 2

尝试此解决方案，我已将div内容替换为两个具有类内容的div

<!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>

如何将div分成几个部分（使用最小高度100％）？

2 个答案: