2016-04-23 9 views
0

enter image description hereDivs in meiner Webseite wird nicht zu 100% Breite Seite umspannt

Wie Sie sehen können, meine Kopf- und Fußzeilen nicht die gesamte Seite erstrecken, im Gegensatz zu meiner Reihe in der Mitte .... das tut (angezeigt durch das rote) mein Stylesheet, wenn das nötig ist.

html,body{ 
    height:100%; 
    width:100%; 
    margin: 0px; 
    padding: 0px; 

    } 

    #blogheader{ 

     background-color: green; 
     height: 57%; 
     margin: 0px; 


    } 

Jede Hilfe wird sehr geschätzt !, Ich bin seit etwa einer Stunde auf diesem festgefahren. Ich habe keine Ahnung, warum das passiert. Ich benutze Bootstrap. Aber die einzige Zeile/Spalte Combo, die ich habe, ist in der Mitte, wo die drei Symbole sind.

+2

Fragen Code Hilfe suchen müssen den kürzesten Code enthalten notwendig, es zu reproduzieren ** in der Frage selbst ** vorzugsweise in einem [** Stapel Snippet **] (https: // blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). Siehe [** So erstellen Sie ein minimales, vollständiges und verifizierbares Beispiel **] (http://stackoverflow.com/help/mcve) –

+0

Meistens, wenn ich dieses Problem sehe, liegt es an ungültigem HTML-Code wie einem Div ist nicht richtig geschlossen. Aber ohne einen vollständigen Codeausschnitt kann ich Ihnen den Grund nicht nennen. Wird Ihr HTML validiert? Auch was sind Ihre Breiten für die Feder, Winkel und Bootstrap Divs eingestellt? –

Antwort

-1

Versuchen:

html, body { 
    height:100px; 
    width:100vw; 
    margin: 0px; 
    padding: 0px; 
} 
+0

Während diese Antwort wahrscheinlich richtig und nützlich ist, ist es vorzuziehen, wenn Sie [http://meta.stackexchange.com/q/114762/159034] erklären, wie es hilft, das Problem zu lösen. Dies wird besonders nützlich in der Zukunft, wenn es eine (möglicherweise nicht zusammenhängende) Änderung gibt, die dazu führt, dass es nicht mehr funktioniert und die Benutzer verstehen müssen, wie es einmal funktioniert hat. Vielen Dank! – Hatchet

0

Sie erwähnen Sie Bootstrap verwenden.

Ich kann den Fehler reproduzieren, der zu sein scheint, weil der 'Blogheader in nicht in einem .row Wrapper ist.

Codepen Demo

Ohne .rowview @ Vollbild

html, 
 
    body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    } 
 
    .container-fluid { 
 
    height: 100%; 
 
    } 
 
    #blogheader { 
 
    background-color: green; 
 
    height: 50px; 
 
    margin: 0px; 
 
    } 
 
    .col-sm-4 { 
 
    height: 50px; 
 
    background: pink; 
 
    border: 1px solid grey; 
 
    }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 

 
    <div id="blogheader"></div> 
 

 
    <div class="row"> 
 
    <div class="col-sm-4"></div> 
 
    <div class="col-sm-4"></div> 
 
    <div class="col-sm-4"></div> 
 
    </div> 
 
</div>

Mit .rowview @ Vollbild

html, 
 
    body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    } 
 
    
 
    .container-fluid { 
 
    height: 100%; 
 
    } 
 
    
 
    #blogheader { 
 
    background-color: green; 
 
    height: 50px; 
 
    margin: 0px; 
 
    } 
 

 
.col-sm-4 { 
 
    height: 50px; 
 
    background: pink; 
 
    border:1px solid grey; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div id="blogheader"></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-sm-4"></div> 
 
    <div class="col-sm-4"></div> 
 
    <div class="col-sm-4"></div> 
 
    </div> 
 
</div>