html - DIV 的背景色没有填满 DIV

Question

如何确保这个 DIV 的背景颜色填满整个 DIV。我将最小高度设置为 100%，低于 100% 的所有内容都没有白色背景。我有一个#global_container 来确保页面滚动（不是div），还有一个#middle 来保留所有内容。我在这里做错了什么？这是一个屏幕截图：

如您所见，背景颜色不会填满整个 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 列中删除了绝对定位，一切都很顺利。特别感谢那些建议使用 float:right 和 float:left 的人......我现在是凌晨 1 点，所以我需要睡觉。不过明天会试试看:)

score 3 · Accepted Answer

您的两列都绝对定位，这使它们脱离了正常流程（感谢评论者）。您应该改用浮点数，并在容器 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 */
}

score 2 · Accepted Answer

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;
}

score 1 · Accepted Answer

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

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

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

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

您不需要浮动，因为向右#left浮动会导致折叠到左侧的空白空间中。#right#left

score 0 · Accepted Answer

您也可以在不更改代码的情况下使用您的代码，只需将 overflow:auto 添加到 CSS 中的#middle：

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

html - DIV 的背景色没有填满 DIV

4 回答 4

Related

Reference