Question

一直试图弄清楚这一点！

在加载时，如果视口太短而无法显示所有内容，则包装器div不会一直延伸到内容的底部。如果我向下滚动，包装div将保持原始视口的高度。

我找到了这个解决方案：http://www.geekicon.net/thinktank/index.shtml/article/643 但是，如果我将包装器位置更改为绝对位置，则整个包装器将向右移动。

我也想知道为什么如果我将8设置为默认值，包装器就会消失。

HTML：

<div id="wrapper">

<div id="header">
  <div class="linkbar" id="logo"><img src="images/gologo.png" width="150" height="100" alt="nothing to see here"/></div> 
  <div class="linkbar" id="link1"><img src="images/burrito.png" alt=""/></div>
  <div class="linkbar" id="link2"><img src="images/dickshamburger.png" alt=""/></div>
  <div class="linkbar" id="link3"><img src="images/potstickers.png"  alt=""/></div>
  <div class="linkbar" id="link4"><img src="images/chickenwaffles.png" alt=""/></div>
</div>
<div id="sidebar">
    <ul id="sidebarlinks">
        <li><h2>GRUBBIN ON:</h2></li>
        <li>burritos</li>
        <li>sandwiches</li>
        <li>chili</li>
        <li>bbq</li>
    </ul>
</div>

<div class="main">
    <h1>Blog Post Title</h1>
    <div class="blogpic"><img src="images/giordano.jpeg" alt=""/><img src="images/giordano.jpeg" width="259" height="194" alt=""/></div>

    <div class ="blogtext">   
        <p class="where">Where: Giordano Bros. - 16th and Valencia, SF</p>
        <p class="whatfood">What: Hot Capicola and Fried Pickles</p>
        <ol>
            <li>fact number one about this bomb food</li>
            <li>fact number two about this bomb food</li>
            <li>fact number three about this bomb food</li>
        </ol>
    </div>
    </div>
<div id="footer">Super cool content with copyrights and links</div>
</div>

CSS：

    html  {
    width: auto;
    height: 100%;
    position: relative;
}
body {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    background-color: #A8E26F;
    font-family: droid-sans;
    font-style: normal;
    font-weight: 400;
    color: #151515;
    position: relative;
    height: 100%;
}
#wrapper {
    width: 750px;
    max-width: 1000px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0px;
    background-image: url(url);
    background-color: #FDF9FF;
    font-family: droid sans;
    position: relative;
    height: 100%;
}
.linkbar {
    width: 20%;
    display: block;
    position: relative;
    height: 100px;
    border-style: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    float: left;
    vertical-align: 50%;
    line-height: 90px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 3px;
    color: #FFFFFF;
    text-shadow: 0px 0px 0px;
    -webkit-text-stroke-width: 1.5px;
    -webkit-text-stroke-color: black;
    font-size: 30px;
    font-style: normal;
    font-weight: 900;
    background-position: 0% 0%;
    background-size: 150px 0100px;
    border-radius: 3px;
}
#header img {
    display: inline;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    left: 0px;
}
#logo {
    font-weight: bolder;
    font-size: 90px;
}
#link1 {
    background-size: 150px 150px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
#link2 {
    letter-spacing: 0.5px;
    background-size: 100% 100%;
}
#link3 {
    letter-spacing: 7px;
}

#wrapper #sidebar p {
    position: relative;
    display: inline-block;
    font-family: droid-sans;
    font-style: normal;
    font-weight: 400;
    width: 20%;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
}

#sidebar {
    font-family: droid-sans;
    font-style: normal;
    font-weight: 400;
    position: absolute;
    float: left;
    width: 150px;
    margin: 0px;
    top: 100px;
    bottom: 0px;
    height: 100%;

}
.main {
    width: 600px;
    font-family: droid-sans;
    font-style: normal;
    font-weight: 400;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 15px;
    margin-top: 6px;
    float: right;
    height: 100%;
    position: relative;
}

ul {
    display: inline-block;
    list-style-type: none;
    padding-left: 0px;
    margin-top: 8px;
}
.linkbar img {
    margin-top: 6px;
    margin-right: 6px;
    margin-bottom: 6px;
    margin-left: 6px;
    width: 135px;
    border-radius: 10px;
    height: 90px;
}

#sidebarlinks {
    position: relative;
    left: 0px;
    text-align: center;
    display: block;
}
h1, h2 {
    margin-top: 8px;
    bottom: 0pt;
    margin-bottom: 0px;
    position: relative;
    display: inline;
    left: auto;
    right: auto;
}
h2 {
    font-size: 19px;
}
#footer {
    position: absolute;
    width: 750px;
    background-color: #FF4246;
    font-family: droid-sans;
    font-style: normal;
    font-weight: 400;
    bottom: 0px;
    display: block;
    left: 0px;
}
.main p {
    padding-left: 14px;
    float: left;
    clear: left;
    display: block;
    margin-top: 6px;
    margin-bottom: 0px;
}
.blogpic {
    position: relative;
    display: inline-block;
    float: left;
    margin-top: 8px;
    margin-right: auto;
    margin-left: auto;
    width: 600px;
    margin-bottom: 0px;
}
.blogpic img {
    min-height: 200px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-left: 21px;
    display: inline-block;
}
.blogtext {
    display: inline-block;
    clear: left;
    float: left;
}
.blogtext ol {
    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 50px;
    clear: left;
    font-size: small;
}

Answer 1

通过将html, body, #wrapper all设置为高度：100％，它们将始终与视口一样高。因此，如果您的内容大于您需要的内容

#wrapper { overflow: auto; }

如果需要，这会将滚动条添加到#wrapper。

将列填充到内容的底部

1 个答案: