Question

如何确保此DIV的背景颜色填满整个DIV。我将min-height设置为100％，100％以下的所有内容都没有白色背景。我有一个#global_container来确保页面滚动（不是div），并且#middle来保留所有内容。我在这做错了什么？这是一个截图：

As you can see the background color does not fill the entire DIV

这是HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Groop</title>

<!--Connection to other files -->
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
    <link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Titillium+Web:200,300' rel='stylesheet' type='text/css'>
<script src="jquery-1.10.0.min.js"></script>
    <script src="animations.js" type="text/javascript"></script>
    <script src="jquery.expander.js"></script>
    <script src="resizable.js"></script>
<!--<script src="http://code.jquery.com/jquery-1.9.1.js"></script>-->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

</head>

<body>
<div id="header">
    <div id="header_center">
        <img src="groop.png" height="50px" width="auto" />
    </div>
</div>

<div id="global_container">

    <div id="middle">

        <!-- Left contains everything you wanna do today-->
        <div id="left"> 

            <!-- Lists everything that you're planning to do NOW --> 
            <div class="list_title"><strong>The Now List</strong></div>

            <ul id="tomorrow_list">

            </ul>        

        <!-- End of left -->  
        </div>

        <!--Right contains stuff that's upcoming-->
        <div id="right">
            <div id="newcontent">
                <textarea id="textbox" rows="2" placeholder="Any assignments?"></textarea> 
            </div>

            <div id="content">
                    <div>
                        <div class="due_title">Due Today</div>
                        <ul class="inlist">
                            <li><div class="list_item" id="list_item">Do math homework if it's really long asldgjka;lskdgj a;lk ja;lsk jgal;sdkjg  as;dgkj a;sdgj ;asd;lkgj ; lkjasdg; ja; a;sdgk j;a j;adsjg ;aklsjd ;a ja;sdlgk ja; a;ds jg;alk ;adj g;adsj g;asdkg ja;kj l;ajg a; j</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                        </ul>
                        <hr />
                    </div>
                    <div>
                        <div class="due_title">Due Tomorrow</div>
                        <ul class="inlist">
                            <li><div class="list_item">Do math homework</div></li>
                        </ul>
                        <hr />
                    </div>
                    <div>
                        <div class="due_title">Due This Week</div>
                        <ul class="inlist">
                            <li><div class="list_item">Do math homework</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                        </ul>
                        <hr />
                    </div>
                    <div>
                        <div class="due_title">Due This Week</div>
                        <ul class="inlist">
                            <li><div class="list_item">Do math homework</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                        </ul>
                        <hr />
                    </div>
                    <div>
                        <div class="due_title">Due This Week</div>
                        <ul class="inlist">
                            <li><div class="list_item">Do math homework</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                        </ul>
                        <hr />
                    </div>
                    <div>
                        <div class="due_title">Due This Week</div>
                        <ul class="inlist">
                            <li><div class="list_item">Do math homework</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                        </ul>
                        <hr />
                    </div>
                    <div>
                        <div class="due_title">Due This Week</div>
                        <ul class="inlist">
                            <li><div class="list_item">Do math homework</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                        </ul>
                        <hr />
                    </div>
            </div>

        <!-- End of right-->    
        </div>

        <!-- End of middle --> 
    </div>
    <!-- End of global container -->
</div>

这是CSS：

a:link
{
    text-decoration:underline;
}

a:visited
{
text-decoration:none;
color:black;
}

a:hover
{
color:#115685;
}

a
{
font-family:'Helvetica Neue', sans-serif;
color:#1A71AD;
}

html, body
{
background-color:#e9e9e9;
margin:0;
}

#header
{
position:fixed;
top:0px;
right:0px;
left:0px;
background-color:#208ff6;
border-bottom:1px solid black;
height:50px;
width:100%;
z-index:1;
}

#header_center
{
width:860px; 
height:auto;
background-color:#147DB5;
margin-left:auto;
margin-right:auto;  
}

#header_center img
{
position:relative;
float:left;
margin-left:0px; 
top:5px;
}

#global_container
{
position:absolute;
height:100%;
width:100%;
overflow:auto;
}

#middle
{
position:relative;
margin-top:50px;
margin-bottom:0px;
margin-right:auto;
margin-left:auto;
width:860px;
min-height:100%;
height:auto;
border-left:1px solid #cfcfcf;
border-right:1px solid #cfcfcf;
background-color:white;
}

/* Everything that is on the left */

#left
{
position:absolute;
min-height:100%;
/*height:auto;*/
width:30%;
margin-left:0px;
}

/* Everything that's on the right */

#right
{
position:absolute;
min-height:100%;
/*height:auto;*/
margin-left:30%;
width:70%;
border-left:1px solid #d0d0d0;
font-family:'Titillium Web', sans-serif;
font-weight:200;
}

#textbox
{
resize:none;
outline:none;
font-family:'Helvetica Neue', sans-serif;
font-size:1em;
margin-top:10px;
margin-left:10px;
margin-right:10px;
width:95%;
padding:5px 5px 5px 5px;
border:1px solid #d0d0d0;
font-weight:300;
}

.list_title
{
float:left;
margin-top:10px;
margin-left:10px;
font-family:'Titillium Web', sans-serif;
font-weight:200;
font-size:1.5em;
color:#208ff6;
}

#postit
{
float:left;
margin-top:5px;
margin-left:10px;
border: 1px solid #147DB5;
background: #208ff6;
color: white;
font: normal 0.8em 'Titillium Web', sans-serif;
font-weight:300;
padding: 4px;
cursor: pointer;
width:55px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

#postit:hover
{
border: 1px solid #147DB5;
background: #147DB5;
color: white;
font: normal 0.8em 'Titillium Web', sans-serif;
font-weight:300;
padding: 4px;
cursor: pointer;
width:55px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

#newcontent
{
width:100%;
height:auto;
overflow:hidden;
padding-bottom:5px;
}

#content
{
width:100%;
height:auto;
overflow:hidden;
}

#content div 
{
width:100%;
}

.due_title
{
color:#208ff6;
margin-left:10px;
margin-top:20px;
font-size:1.2em;
}

h1
{
color:#208ff6;
margin-left:10px;
margin-top:10px;
font-size:1.2em;
}

hr 
{
    display: block;
    height: 1px;
    border: 0;
    /*border-top: 1px solid #208ff6;*/
border-top:1px solid #d0d0d0;
    margin:5px 0px 0px 0px;
    padding: 0;
}

.inlist
{
margin-left:30px; 
margin-top:0px; 
font-size:1em; 
font-family:'Helvetica Neue',sans-serif;
color:black;
font-weight:300;
}

.list_item
{
padding:10px 10px 10px 0px; 
}

最终，我希望#middle包含其中的所有项目（并动态增长自己的高度），并相应地滚动页面。我不希望自己滚动#middle。我想加入#global_container并拥有全球集装箱滚动高度，而不是#middle本身。

这是一个jsfiddle：http://jsfiddle.net/VM6jf/

谢谢:)

更新：

感谢所有的回复，伙计们！我做错了是因为我在滥用绝对定位。我删除了#left和#right列的绝对定位，一切顺利。特别感谢那些建议使用浮动的人：右和浮动：左...现在是凌晨1点，我现在正在睡觉。明天会尝试:)但

Answer 1

你的两个列都是绝对的位置，它们会将它们从Normal流程中取出（感谢评论者）。你应该使用浮点数，在容器div上有一些明确的修复，以强制它自己调整内容的大小。

您的背景仅与视口一样高。

#middle {
    overflow:hidden;/* Or any other clear fix that works for your site */
}
#left {
    float: left;
    width: 30%;
}
#right {
    border-left: 1px solid #D0D0D0;
    float: right;
    font-family: 'Titillium Web',sans-serif;
    font-weight: 200;
    width: 69%;/* Has to be less than 70% since there is a border, consider a wrapper element for the border */
}

Answer 2

http://jsfiddle.net/zWvtC/1

从左右div中删除绝对定位，这样无论哪个高，背景总会到达底部

#right
{
    min-height:100%;
    /*height:auto;*/
    margin-left:30%;
    width:70%;
    border-left:1px solid #d0d0d0;
    font-family:'Titillium Web', sans-serif;
    font-weight:200;
}

#left
{
    min-height:100%;
    /*height:auto;*/
    width:30%;
    margin-left:0px;
}

Answer 3

您应该悬浮#left和#right列，而不是绝对定位它们。

您可以采取以下几个步骤来实现我相信您正在寻找的结果。

将clearfix添加到您的#middle div。
在HTML中，将#left移到#right下方（因为右侧将浮动到右侧）。
从position: absolute;和#left

#right

从#right

结果：http://jsfiddle.net/VM6jf/7/

您不需要浮动#left，因为向右浮动#right会导致#left崩溃到左边的空白区域。

Answer 4

你也可以不加改变地生活你的代码，只需在css中添加overflow：auto到你的#middle：

#middle{
 ....
 ....
 ....
 overflow: auto;  /* add this line */
}

DIV的背景颜色不会填充DIV

4 个答案: