Question

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

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

内容部分将徽标下方的空格留空，并且有两列应均匀填充剩余空间（每个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;
}

Answer 1

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

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

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

的定义聪明地使用边缘并浮动以避免/允许空的空间。

- 尽可能保持代码清洁明亮。

正如您所看到的，遵循这些小小的预防措施，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中看到整个项目欢呼声。

Stick Footer不再适用于复杂的液体设计

1 个答案: