3

この DIV の背景色が DIV 全体を塗りつぶすようにするにはどうすればよいですか。min-height を 100% に設定すると、100% 未満のすべての背景が白くなりません。ページが (div ではなく) スクロールすることを確認するための #global_container と、すべてのコンテンツを保持するための #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 に HEIGHT を追加し、#middle 自体ではなく、グローバル コンテナー スクロールを使用したいと考えています。

ここに jsfiddle があります: http://jsfiddle.net/VM6jf/

ありがとう ：）

アップデート：

みんな、返信ありがとう！私が間違っていたのは、絶対配置を悪用していたことです。#left 列と #right 列から絶対配置を削除すると、すべてがスムーズに進みました。float:right と float:left の使用を提案してくれた人たちに特に感謝します ... 私が今いる場所は午前 1 時なので、少し寝る必要があります。でも明日試してみます:)

4

4 に答える 4

3

両方の列は完全に配置されているため、通常のフローから外れています（コメント者に感謝します）。代わりにフロートを使用し、コンテナの 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 */
}
于 2013-06-19T15:38:35.717 に答える
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;
}
于 2013-06-19T15:40:16.693 に答える
1

#leftおよび#right列を絶対に配置するのではなく、フローティングにする必要があります。

ここでは、あなたが探していると私が信じている結果を達成するために実行できるいくつかの手順を示します.

  1. div にclearfixを追加します#middle。
  2. HTML では、下に移動し#leftます#right(右が右に浮くため)。
  3. とposition: absolute;から削除#left#right
  4. から左マージンを削除します#right

結果: http://jsfiddle.net/VM6jf/7/

フロートする必要はありません。右にフロートすると#left、左に作成された空きスペースに が折りたたまれます。#right#left

于 2013-06-19T15:43:03.817 に答える
0

コードを変更せずにそのまま使用して、overflow:auto を css の #middle に追加することもできます。

#middle{
 ....
 ....
 ....
 overflow: auto;  /* add this line */
}
于 2013-06-19T15:49:20.307 に答える