DIV die Hintergrundfarbe nicht füllen DIV

Wie kann ich sicherstellen, dass das DIV die Hintergrundfarbe füllt die ganze DIV. Ich habe die min-height auf 100% und alles unter 100% nicht über einem weißen hintergrund. Ich habe eine #global_container, um sicherzustellen, dass die Seite scrollt (nicht div), und #Mitte zu halten, alle Inhalte. Was mache ich hier falsch? Hier ein screenshot:

Hier die HTML-Ausgabe:

<!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>

Und hier das 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; 
}

Schließlich möchte ich die #Mitte, alle items (und dynamisch wachsen Ihrer eigenen Höhe) und scroll die Seite entsprechend. Ich MÖCHTE NICHT DAS #Mitte SCROLLEN VON SELBST. Ich MÖCHTE HINZUFÜGEN, die HÖHE DER #global_container UND HABEN DIE GLOBAL CONTAINER SCROLLEN, nicht #Mitte von selbst.

Hier ein jsfiddle: http://jsfiddle.net/VM6jf/

Dank 🙂

UPDATE:

Danke für die vielen Antworten, Jungs! Was ich falsch machte, war, dass ich missbraucht absolute Positionierung. Ich entfernte die absolute Positionierung von #Links und #rechts, Spalten, und alles ging glatt. Besonderen Dank an die Jungs, die vorgeschlagen, mit float:right und float:left ... Es ist 1 Uhr nachts, wo ich jetzt bin, so werde ich brauchen, um etwas Schlaf zu bekommen. Werde versuchen, es morgen aber 🙂

möglich, Duplikat der Wie kommt es, dass meine float-Elemente nicht in Ihrer übergeordneten
Sie können nicht bekommen, was Sie wollen mit absoluter Positionierung. Die Höhe 100% auf die global container ist die Begrenzung der Höhe. Messing mit Ihrer Geige jetzt zu demonstrieren.
er ist nicht schwebend, dies ist die absolute Positionierung verwendet falsch.
Danke @Andrew ich werde überprüfen Sie die fiddle, wenn Sie fertig sind
Mehrere gute Antworten, wirklich, siehe ogc-nicks.

InformationsquelleAutor taevanbat | 2013-06-19

css html

2

http://jsfiddle.net/zWvtC/1

Entfernen Sie die absolute Positionierung von Links und rechts divs, so dass keine Angelegenheit, die hoch ist, ist der hintergrund immer erreichen, er unten
```
#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;
}
```
Dies würde nur funktionieren, wenn die Rechte Spalte wurde immer größer als die linke Spalte. Es ist besser, um Dinge zu machen, grundsolide, damit das Problem nicht wieder in der Zukunft.
Guter Punkt, das hinzufügen dieselbe änderung auch für die linke Spalte

InformationsquelleAutor km6zla

Beide Spalten sind absolut posiioned, die nimmt Sie aus dem Normalen Fluss (Dank Kommentator). Sie verwenden sollten, schwebt stattdessen mit einer klaren loesung von irgendeiner Art an der div-container, um ihn zu zwingen, um die Größe selbst zum Inhalte.

Ihr Hintergrund ist nur so groß wie der viewport ist.

#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 */
}

DOM-flow != Normal Flow

InformationsquelleAutor Matthew Darnell

1

Sollten Sie schwimmend Ihre #left und #right Spalten statt der absolut-Positionierung.

Hier sind ein paar Schritte, die Sie ergreifen können, um die Ergebnisse erzielen, die ich glauben, die Sie suchen.
1. Hinzufügen clearfix zu Ihrem #middle div.
2. In der HTML -, bewegen #left unten #right (da rechts wird nach rechts gefloatet).
3. Entfernen position: absolute; aus #left und #right
4. Entfernen Sie den linken Rand von #right
Ergebnis: http://jsfiddle.net/VM6jf/7/

Brauchen Sie nicht zu schwimmen #left als schwebende #right auf der rechten Seite wird die Ursache der #left Zusammenbruch in den leeren Raum auf der linken Seite.

InformationsquelleAutor Axel
0

können Sie auch live Ihr code ohne änderungen und einfach hinzufügen von overflow:auto für Ihre #Mitte css:
```
#middle{
 ....
 ....
 ....
 overflow: auto;  /* add this line */
}
```
InformationsquelleAutor medBouzid

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.