1

我有一个液体设计，它有顶部、内容和页脚三个主要部分。

顶部有一个固定大小的标志，带有标题和导航栏，应该填满页面的剩余右侧。

内容部分将徽标下方的空间留空，并有两列应均匀填充剩余空间（每列 50%）。

页脚应该贴在页面底部，句号！

我可以让这些部分单独工作，但是当我尝试将它们组合成一页时，如果列的内容是“长”的，页脚将不会停留下来。显然我错过了一些东西，但这里的其他人也看不到它。

<!DOCTYPE html>
<html>
<head>
    <title>Final Design</title>
    <meta name="generator" content="BBEdit 9.6" />
    <link href="final.css" rel="stylesheet">
</head>
<body>

<div id="wrap">
    <div id="totalContentWrap">
      <div id="topContentWrap">
          <div id="logo">
              Logo goes here.
          </div>
          <div id="topContent">
              <div id="heading">
                  Heading goes here.
              </div>
              <div id="navbar">
                  Navbar goes here.
              </div>
          </div>
      </div>
      <div id="contentWrap">
          <div id="blank">
              Nothing goes here.
          </div>
          <div id="mainContent">
              <div id="contentLeft">
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui enim. Aenean mattis massa nec quam viverra ut consectetur turpis lobortis. Aliquam vitae elit erat, ac iaculis nunc. Maecenas fringilla ornare blandit. Nunc fermentum bibendum mattis. Curabitur elementum commodo volutpat. Ut dapibus odio sit amet leo euismod in viverra mi cursus. Quisque commodo velit accumsan lorem sagittis dignissim fermentum nisl dapibus. Praesent in augue sem, id viverra enim.
                      </p>
                      <p>Fusce scelerisque, ante in lacinia cursus, sem nulla suscipit magna, at posuere magna tellus sit amet erat. Vivamus erat enim, elementum sed molestie id, mollis eu dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque interdum rutrum nisl in aliquet. Nunc bibendum eros non purus gravida venenatis. Duis dictum commodo lorem non sodales. Nunc mattis hendrerit suscipit. Fusce lacinia, mauris a iaculis pharetra, ante massa bibendum augue, nec tempor quam tortor id dolor. Mauris aliquam, nibh vel viverra venenatis, risus sapien ultrices lorem, ac suscipit lacus lorem quis urna. Vestibulum id tortor urna. Cras at mi a dolor aliquam auctor id imperdiet odio. Phasellus sollicitudin iaculis nisl, eget lacinia felis porttitor ac. Nulla congue laoreet rutrum.
                      </p>
                      <p>Donec condimentum viverra faucibus. Aliquam iaculis scelerisque eros ut imperdiet. In odio risus, eleifend nec viverra porttitor, laoreet ut dui. Fusce posuere mauris a nulla fringilla tristique a ac libero. Donec in eros quis orci cursus pharetra. Nam eu odio sed orci molestie ultricies ac quis felis. Nullam hendrerit, elit sit amet scelerisque porttitor, ligula enim feugiat dolor, quis scelerisque libero libero in nulla. Phasellus hendrerit, sapien id rhoncus accumsan, neque arcu auctor orci, ac luctus nibh ipsum quis risus.
                      </p>
                      <p>Morbi nulla ligula, feugiat sit amet tincidunt sed, cursus a mi. Aenean aliquam tortor quis nisl convallis nec elementum mauris tempor. Aenean non laoreet magna. Phasellus at dolor magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla luctus fringilla mi posuere tempus. Quisque in dolor id nulla vestibulum posuere et sed purus. In lacus sapien, porta id pellentesque sed, iaculis vitae arcu. Etiam rutrum, ante eu tristique consectetur, augue nulla ultrices turpis, quis hendrerit velit quam non massa. Sed vitae eros ac nisl gravida pretium eu tempor mi. Vivamus tristique leo ac augue auctor interdum. In sit amet leo nisi. Fusce a sem leo. Suspendisse at odio neque. Donec consectetur libero vel ipsum dignissim sed vulputate nisi pretium. Morbi in diam lacus, vel mollis libero.
                      </p>
                      <p>Etiam fermentum commodo euismod. Mauris lacinia imperdiet augue, sit amet lacinia tortor placerat vel. Suspendisse pretium, est ac rutrum volutpat, arcu dui fermentum nisl, ac laoreet lectus est et ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla convallis, tellus sit amet bibendum dictum, nisl tortor facilisis ligula, at tempor nisl nibh et diam. Sed elementum rhoncus posuere. Pellentesque libero odio, placerat non laoreet vitae, fermentum id mi.
                      </p>
                      <p>Duis vitae erat massa, in consectetur velit. Duis quis ipsum sit amet dolor dignissim iaculis non vitae nibh. Quisque sed sapien sapien, et fringilla eros. Suspendisse porta nisi ut felis sodales eu adipiscing enim volutpat. Nulla porta mauris vitae metus viverra mollis. Nam condimentum elementum augue sed posuere. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean mi lorem, feugiat blandit vestibulum vel, ornare at neque. Fusce nec elit vel ante sollicitudin imperdiet quis non eros. Curabitur sed commodo lectus. Maecenas vitae aliquam lectus. Ut quis diam non dui tempor consectetur. Curabitur vel turpis dui. Aenean gravida porta enim, ut congue lectus ornare a.
                      </p>
              </div>
              <div id="contentRight">
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui enim. Aenean mattis massa nec quam viverra ut consectetur turpis lobortis. Aliquam vitae elit erat, ac iaculis nunc. Maecenas fringilla ornare blandit. Nunc fermentum bibendum mattis. Curabitur elementum commodo volutpat. Ut dapibus odio sit amet leo euismod in viverra mi cursus. Quisque commodo velit accumsan lorem sagittis dignissim fermentum nisl dapibus. Praesent in augue sem, id viverra enim.
                      </p>
                      <p>Fusce scelerisque, ante in lacinia cursus, sem nulla suscipit magna, at posuere magna tellus sit amet erat. Vivamus erat enim, elementum sed molestie id, mollis eu dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque interdum rutrum nisl in aliquet. Nunc bibendum eros non purus gravida venenatis. Duis dictum commodo lorem non sodales. Nunc mattis hendrerit suscipit. Fusce lacinia, mauris a iaculis pharetra, ante massa bibendum augue, nec tempor quam tortor id dolor. Mauris aliquam, nibh vel viverra venenatis, risus sapien ultrices lorem, ac suscipit lacus lorem quis urna. Vestibulum id tortor urna. Cras at mi a dolor aliquam auctor id imperdiet odio. Phasellus sollicitudin iaculis nisl, eget lacinia felis porttitor ac. Nulla congue laoreet rutrum.
                      </p>
                      <p>Donec condimentum viverra faucibus. Aliquam iaculis scelerisque eros ut imperdiet. In odio risus, eleifend nec viverra porttitor, laoreet ut dui. Fusce posuere mauris a nulla fringilla tristique a ac libero. Donec in eros quis orci cursus pharetra. Nam eu odio sed orci molestie ultricies ac quis felis. Nullam hendrerit, elit sit amet scelerisque porttitor, ligula enim feugiat dolor, quis scelerisque libero libero in nulla. Phasellus hendrerit, sapien id rhoncus accumsan, neque arcu auctor orci, ac luctus nibh ipsum quis risus.
                      </p>
                      <p>Morbi nulla ligula, feugiat sit amet tincidunt sed, cursus a mi. Aenean aliquam tortor quis nisl convallis nec elementum mauris tempor. Aenean non laoreet magna. Phasellus at dolor magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla luctus fringilla mi posuere tempus. Quisque in dolor id nulla vestibulum posuere et sed purus. In lacus sapien, porta id pellentesque sed, iaculis vitae arcu. Etiam rutrum, ante eu tristique consectetur, augue nulla ultrices turpis, quis hendrerit velit quam non massa. Sed vitae eros ac nisl gravida pretium eu tempor mi. Vivamus tristique leo ac augue auctor interdum. In sit amet leo nisi. Fusce a sem leo. Suspendisse at odio neque. Donec consectetur libero vel ipsum dignissim sed vulputate nisi pretium. Morbi in diam lacus, vel mollis libero.
                      </p>
                      <p>Etiam fermentum commodo euismod. Mauris lacinia imperdiet augue, sit amet lacinia tortor placerat vel. Suspendisse pretium, est ac rutrum volutpat, arcu dui fermentum nisl, ac laoreet lectus est et ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla convallis, tellus sit amet bibendum dictum, nisl tortor facilisis ligula, at tempor nisl nibh et diam. Sed elementum rhoncus posuere. Pellentesque libero odio, placerat non laoreet vitae, fermentum id mi.
                      </p>
                      <p>Duis vitae erat massa, in consectetur velit. Duis quis ipsum sit amet dolor dignissim iaculis non vitae nibh. Quisque sed sapien sapien, et fringilla eros. Suspendisse porta nisi ut felis sodales eu adipiscing enim volutpat. Nulla porta mauris vitae metus viverra mollis. Nam condimentum elementum augue sed posuere. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean mi lorem, feugiat blandit vestibulum vel, ornare at neque. Fusce nec elit vel ante sollicitudin imperdiet quis non eros. Curabitur sed commodo lectus. Maecenas vitae aliquam lectus. Ut quis diam non dui tempor consectetur. Curabitur vel turpis dui. Aenean gravida porta enim, ut congue lectus ornare a.
                      </p>
              </div>
          </div>
      </div>
  </div>
</div>
<div id="footer">
    Footer goes here.
</div>

</body>
</html>



* {margin:0;padding:0;} 

html, body {
    height: 100%;
}

#wrap {
    min-height: 100%;
}

#topContentWrap {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%
    height: auto;
}

#logo {
    position: absolute;
    top: 0px;
    left: 0px;
    min-height: 140px;
    width: 140px;
    background-color: purple;
}

#topContent {
    position: absolute;
    top: 0px;
    left: 140px;
    right: 0px;
    height: auto;
    background-color: blue;
}

#heading {
    position: relative;
    top: 0px;
    left: 0px;
    height: 92px;
    width: auto;
    border:2px dashed green;
}

#navbar {
    position: relative;
    top: 0px;
    left: 0px;
    height: 40px;
    border:2px dashed red;
    z-index: 1;
}

#totalContentWrap {
    //position: absolute;
    overflow:auto;
    padding-bottom: 100px;                  /* must be same height as the footer */
    top: 220px;
    left: 140px;
    height: 1000px;
    background-color: lightblue;
}


#contentWrap {
    position: absolute;
    overflow:clip;
    top: 140px;
    left: 0px;
    width: 100%;
    /*padding-bottom: 100px;                    /* must be same height as the footer */
    background-color: yellow;
}

#mainContent {
    position: absolute;
    top: 0px;
    left: 140px;
    right: 0px;
    height: auto;
    padding-bottom: 100px;                  /* must be same height as the footer */
    background-color: green;
}

#blank {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 140px;                           /* must be same width as the logo */
    background-color: orange;
    z-index: 3;
}

#contentLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 50%;
    background-color: purple;
    z-index: 2;
}

#contentRight {
    position: relative;
    top: 0px;
    left: 50%;
    height: 100%;
    width: 50%;
    background-color: blue;
}

#footer {
    position: relative;
    margin-top: -100px; /* negative value of footer height */
    height: 100px;
    clear:both;
    background-color: orange;
} 

p {
    text-indent:30px;
    padding-bottom: 20px;
    padding-left:  20px;
    padding-right: 20px;
}
4

1 回答 1

0

你的代码对我来说太乱了，所以我重写了它，让你更好地理解发生了什么。基本上有一些小建议不要深入研究这样的问题：

- 您不需要为您的 DIV 声明每个位置，只需让默认位置（即static）完成他的工作。

- 如果需要，也尝试使用相对位置构建您的站点（尤其是使用流畅的布局），除非绝对/固定位置是绝对必要的。你可以在这里了解position属性的定义

- 巧妙地嵌套您的 div 并使用边距和浮动来避免/允许空白空间。

- 尽量保持你的代码简洁明了。

如您所见，遵循这些小预防措施后，CSS 变得更加轻松和易于理解： 

    body, html {
    margin:0;
    height:100%;
}
p {
    padding:15px;
}
#headerwrap {
    width:100%;
    height:140px;
    background-color: red;
}
#logo {
    height:140px;
    width:140px;
    background-color:pink;
    float:left;
}
#heading {
    height:100px;
}
#navbar {
    height:40px;
    background-color:green;
}
#heading, #navbar {
    float:left;
    width:calc(100% - 140px);
}
#middlewrap {
    margin-left:140px;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom:-100px;
}
#firstcol, #secondcol {
    width:50%;
    float:left;
}
#firstcol {
    background-color:yellow;
}
#secondcol {
    background-color:blue;
}
#pushdown{
    height:100px;
    clear:both;
    display:block;
}
#footerwrap {
    height:100px;
    background-color: green;
}

我还对您的 HTML 结构进行了一些小修改。您可以在THIS FIDDLE
中看到整个项目。 干杯。

于 2013-04-17T17:59:23.397 回答