Question

我用谷歌搜索了这个并尝试了他们建议的所有内容并且它似乎无法正常工作。

我正在制作一个模板 - 所以这一切都必须在一个HTML文件中。我猜我的CSS搞砸了一些东西，我只是没有捕捉到......我已经扫过了好几次了。

问题图片（我希望白色延伸到页面底部;即使没有足够的内容）：

CSS（还有更多，但我认为这些是唯一重要的）：

html, body
{
    padding: 0px;   
    min-height: 100%;
    margin: auto;
    background-image: url("http://www.pixieduststudio.net/images/stripes.png");
    background-repeat: repeat;
}

#wrapper
{
    width: 80%;
    margin: auto;
    background-color: transparent;
}

#navbar
{
    background-color: white;
    text-align: center;
    width: 100%;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    display: block !important;
    margin: auto;
    height: 75px;
}

#sidenav
{
    width: 20%;
    float: left;
    border-bottom-left-radius: 5px;
    border-right: 1px solid pink;
    background-color: white;
}

#content
{       
    padding: 25px;
    width: 80%;
    float: left;
    background-color: white;
    margin: auto;
}

#content #pageTitle
{
    margin: 0;
    padding: 25px;
    letter-spacing: 3px;
}

#pageContent, img
{
    width: 80%;
}

HTML

  <div id="wrapper">
    <div id="navbar" class="navbar navbar-default" role="navigation">
        <ul id="nav">
           <!-- LINK ARE HERE BUT I REMOVED THEM -->
        </ul>
    </div>
    <div id="sidenav">

        <div id="socialBar">
            <a href="https://www.facebook.com/pixieduststudio?fref=ts"><img src="http://www.pixieduststudio.net/images/facebook.png"></a>
            <a href="http://www.online-instagram.com/user/pixie_dust_studio/435027170"><img src="http://www.pixieduststudio.net/images/Instagram.png"></a>
            <img src="http://www.pixieduststudio.net/images/EmailUs.png">
        </div>

        <div id="shopBar">
            <img src="http://www.pixieduststudio.net/images/shoppen.png">
                <hr class="section">
                    <figure>
                        <a href="http://www.pixieduststudio.net/go/order.php?"><img class="icon" src="http://www.pixieduststudio.net/images/bag.png"></a>
                    </figure>
            <img src="http://www.pixieduststudio.net/images/shopinfpen.png">
                <hr class="section">
                <div class="sidelinks">
                    <li><a href="http://www.pixieduststudio.net/pages/MeetPixie.htm">Meet Pixie</a></li>
                    <li><a href="http://www.pixieduststudio.net/weblinks.htm">Shipping</a></li>
                    <li><a href="http://www.pixieduststudio.net/sitemap.htm">Site Map</a></li>
                    <li><a href="http://www.pixieduststudio.net/orders.htm">Order Tracking</a></li>
                    <li><a href="http://www.pixieduststudio.net/guestbook.htm">Guest Chat</a></li>
                </div>
            <img src="http://www.pixieduststudio.net/images/searchpen.png">
                <hr class="section">
                <p style="margin: 25px;">%SEARCH_SITE%</p>
        </div>

    </div>
    <div id="content">
        <img id="pageTitle" class="img-responsive" src="http://www.pixieduststudio.net/images/headertitle.png" />
        <hr>
        %CONTENT%
        <!--<p id="pageContent" style="padding: 25px;">             
            <img src="http://www.pixieduststudio.net/images/camp.png">
        </p>-->

    </div>

    <div id="foot">
        <!--<img src="images/footer.png">-->
    </div>
</div>

Answer 1

您必须将background-color: white;移动到#wrapper，它是内容和侧边栏的容器，以使整个框bg为白色。

将#sidenav和#content更改为display: inline-block而不是float: left，以允许#wrapper调整其内容的高度。添加vertical-align: top，以便它们可以正确地相互对齐。

#wrapper
{
    width: 80%;
    margin: auto;
    background-color: white;
}

#sidenav
{
    width: 20%;
    display: inline-block;
    vertical-align: top;
    background-color: white;
}
#sidenav .nav {
    border-bottom-left-radius: 5px;
    border-right: 1px solid pink;
}
#content
{       
    padding: 25px;
    width: 80%;
    display: inline-block;
    vertical-align: top;
    margin: auto;
}

你还必须摆脱#sidenav上的1px右边界，这将使#wrapper的内容加起来超过它的100％（并因此换行）。

将您的sidenav内容更改为：

<div id="sidenav">
    <div class="nav">
        ...
    </div>
</div>

Answer 2

为了解决此问题，您可以更改容器的高度以使用vh单元

在您的css中，将主要内容容器的高度设置为：

#content
{       
    height: 100vh;
}

这会将容器的高度设置为视口中浏览器垂直高度的100％，请注意这可能与旧浏览器存在兼容性问题。

如果您遇到问题，您还需要将父元素高度设置为100vh，这是因为子元素（您的主要内容）将适合其父元素的100%高度，不适合整个页面，修复此问题，将以下内容添加到您的CSS：

#wrapper
{
     height: 100vh;
}

子元素现在可以填满整个屏幕。

Answer 3

考虑以下示例...

CSS

html,
*
{
    border      : 0;
    box-sizing  : border-box;
    margin      : 0;
    padding     : 0;
}

#wrapper
{
    background-color : red;
    display          : flex;
    min-height       : 100vh;
}

#col-1
{
    background-color : blue;
    display          : block;
    float            : left;
    width            : 25%;
}

#col-2
{
    background-color : yellow;
    display          : block;
    float            : left;
    width            : 75%;
}

<!DOCTYPE html>

<html>
    <head>
        <meta charset = "utf-8">
		
        <meta name    = "viewport"
		      content = "width = device-width, initial-scale = 1.0"
		>

		<link href = "CSS/Example.css"
		      rel  = "stylesheet"
		      type = "text/css"
		>

        <style>
        </style>
    </head>

    <body>
        <div id="wrapper">
            <div id = "col-1">
                 <p>Column1</p>
                 <p>Column1</p>
                 <p>Column1</p>
            </div>
            
            <div id = "col-2">
                <p>Column2</p>
            </div>
        </div>
    </body>
</html>

除非随后指定，否则CSS文件中的*部分将删除所有元素的任何默认边框，边距和填充。盒子大小：边框; line确保任何边框，边距和填充都包含在指定的宽度和高度内，这使得布局页面变得更加容易。

请访问https://css-tricks.com/snippets/css/a-guide-to-flexbox/获取有关flexbox的说明。

将此结构应用于您的页面应该很好地解决了指定的问题。

如果您有任何疑问，请随时回复。

无法获得＆＃34;内容＆＃34; div延长页面长度

3 个答案: