Körpergröße nicht füllend 100% Seitenhöhe

Ich kann das nicht herausfinden. Ich habe eine einfache Reihe von Divs mit einer Kopfzeile, Seitenleiste und Inhaltsbereich. Der Header ist die volle Breite, die Seite und der Inhalt sind links schwebend.Körpergröße nicht füllend 100% Seitenhöhe

Ich brauche die Seitenleiste (für den Hintergrund) um 100% der Seitenhöhe zu füllen, aber wenn ich Element in Chrom inspiziere, endet die <body> tatsächlich lange vor dem Ende der Seite, die die Höhe zu begrenzen scheint meiner Seitenleiste.

Was hält die <body> davon ab, die ganze Seite hier zu füllen?

<body> 
    <div id="head"> 
    </div> 
<div id="sidebar"> 
    <div> 
     <div id="menu"> 
      <ul> 
       <li><a href="/dashboard.php"><img src="/img/blank.png" alt="home" id="home_ico">Home</a> 
       </li> 
       <li class="admin"><a><img src="/img/blank.png" alt="home" id="users_ico">Users</a> 
        <ul class="submenu" style="display: none;"> 
         <li><a href="/users">Manage users</a></li> 
         <li><a href="https://stackoverflow.com/users/add.php">Add a user</a></li> 
        </ul> 
       </li> 

       <li class=""><a><img src="/img/blank.png" alt="home" id="clients_ico">Clients</a> 
        <ul class="submenu" style="display: none;"> 
         <li><a href="/client_orgs">Manage clients</a></li> 
         <li><a href="/client_orgs/add.php" class="admin">Add a client</a></li> 
        </ul> 
       </li> 


       <li class=""><a><img src="/img/blank.png" alt="home" id="projects_ico">Projects</a> 
        <ul class="submenu" style="display: none;"> 
         <li><a href="/projects">Manage projects</a></li> 
         <li><a href="/projects/add.php" class="admin">Create a project</a></li> 
         <li></li> 
         <li><a href="/projects/submitted.php" class="admin client">Submitted projects</a></li> 
         <li><a href="/projects/closed.php" class="admin">Closed projects</a></li> 
        </ul> 
       </li> 
       <li class=""><a href="/my_account"><img src="/img/blank.png" alt="home" id="account_ico">Account</a> 
       </li> 
       <li class="active"><a href="/help.php"><img src="/img/blank.png" alt="help" id="help_ico">Help</a> 
       </li> 
      </ul> 

     </div> 
    </div> 
</div>  
<div id="body" class="full"> 
    <div id="content"> 

    <!--start block--> 
    <div class="block"> 
     <h1><img src="/img/blank.png" alt="home" id="help_ico"> Help</h1> 
     <p> 
     Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. 
     </p> 
    </div> 
</div> 
</body>

CSS:

* { 
    margin:0; 
    padding:0; 
} 
html, body { 
    height:100%; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    line-height: 160%; 
    position: relative; 
    background: #000; 
} 
#sidebar{ 
    width: 200px; 
    background: #000; 
    height: 100%; 
    padding-top: 30px; 
    -webkit-box-shadow: inset -4px 0px 8px 0px rgba(0, 0, 0, 0.5); 
     box-shadow: inset -4px 0px 8px 0px rgba(0, 0, 0, 0.5); 
    float: left; 
} 
#body{ 
    float: left; 
    padding: 30px 0 30px 40px; 
    width: 75%; 
}

Quelle

2012-11-11 TH1981

Hilfreich? http://StackOverflow.com/Questions/1622027/percentage-Height-HTML-5-Css – javanut13

Versuchen Sie,

body { 
    min-height: 100%; 
}

Quelle

2012-11-11 00:48:55

Es gibt zwei Probleme:

Erstens:
Die Breite der Elemente ist größer als 100% der Breite der Seite
Dies ist, warum Ihre div id = "Körper" unter der Sidebar stecken bleibt.

Versuchen Sie, die Breite des Körpers etwa 30% und Sie sollten sehen, was ich meine.

Zweitens:
height: 100% ist wirklich nicht so funktionieren, es scheinen würde, gibt es Workarounds dafür.
Here is a great solution

Quelle

2012-11-11 00:57:53 Malkus

Ich versuchte das, indem ich eine klare innerhalb des Körpers und innerhalb der 'content' div und innerhalb der' body' div und es hatte keine Effekt – TH1981

Ich hatte eine Chance, um Ihren Code näher zu betrachten und aktualisierte meine Antwort. Schauen Sie sich an, lassen Sie mich wissen, ob das für Sie funktioniert. – Malkus

Sie scheinen zu versuchen, ein Layout zu erreichen, das die gesamte Höhe des Containers überspannt - diese Layouts sind nicht möglich. Sie sollten auf der CSS-Technik lesen, eine häufige Problemumgehung für dieses Problem.

Quelle

2012-11-11 01:12:58 Wex

Im Zweifel - der beste Weg, fand ich durch Zugabe dies in Angriff zu nehmen:

html { overflow-y:scroll; }

Quelle

2013-07-30 19:22:28 Erick

Sieht aus wie Sie Schwimmer haben: auf Kinder angewendet gelassen. Verwenden Sie diesen Code:

Quelle

2013-12-27 21:20:05

Ich habe das gleiche Problem; es ist so nervig .. Ich habe versucht den Überlauf, aber es hat nicht funktioniert ... Können Sie einen Blick auf http://omarhabash.com/wp/?page_id=54. – Omar

Sie sollten eine Goldmedaille für diese Antwort haben, ich suchte nach Alter! Vielen Dank. –

funktioniert wie ein Charme, aber ich werde dich lassen –

Nicht sicher, ob dies jemand helfen wird, aber ich hatte das gleiche Problem, aber nur auf dem Handy. Ich entdeckte, dass es einen Stil html { height: 100%; } gab, der den Körper veranlasste, die volle Höhe nicht zu verlängern. Sobald ich die Höhe von 100% auf dem HTML-Tag entfernt hatte, wurde der Körper nicht mehr die volle Höhe der Seite auf dem Handy verlängert. Ich habe immer noch 100% Höhe auf dem Body-Tag.

Quelle

2017-08-25 18:56:39 lflores

Körpergröße nicht füllend 100% Seitenhöhe

Antwort

Verwandte Themen