Feste Header-Breite der gleichen Größe wie Container div

Das header Element ist in einem div Container. Ich setze header als fixed. Es verursacht Probleme 2:Feste Header-Breite der gleichen Größe wie Container div

Die Breite header die Breite des div Element überläuft. Es sollte mit der div übereinstimmen.
Die anderen Elemente nav und article sind nicht sichtbar, wenn ich header als behoben mache.

Dies ist, wie es jetzt erscheint:

hier ist mein Code-Schnipsel:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
div.container { 
 
    width: 100%; 
 
    border: 1px solid gray; 
 
} 
 
header{ 
 
    position:fixed; 
 
    width:100%; 
 
    right:0px; 
 
} 
 
header, footer { 
 
    padding: 1em; 
 
    color: white; 
 
    background-color: black; 
 
    clear: left; 
 
    text-align: center; 
 
} 
 

 
nav { 
 
    float: left; 
 
    max-width: 160px; 
 
    margin: 0; 
 
    padding: 1em; 
 
} 
 

 
nav ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
} 
 
\t \t \t 
 
nav ul a { 
 
    text-decoration: none; 
 
} 
 

 
article { 
 
    margin-left: 170px; 
 
    border-left: 1px solid gray; 
 
    padding: 1em; 
 
    overflow: hidden; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 

 
<header> 
 
    <h1>City Gallery</h1> 
 
</header> 
 
    
 
<nav> 
 
    <ul> 
 
    <li><a href="#">London</a></li> 
 
    <li><a href="#">Paris</a></li> 
 
    <li><a href="#">Tokyo</a></li> 
 
    </ul> 
 
</nav> 
 

 
<article> 
 
    <h1>London</h1> 
 
    <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> 
 
    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> 
 
</article> 
 

 
<footer>Copyright © W3Schools.com</footer> 
 

 
</div> 
 

 
</body> 
 
</html>

, wie es erscheinen Ich möchte Dies ist

Quelle

2016-09-19 Mitali

Sie keinen festen Header mit einem nicht-feste Höhe haben, so können Sie den Header eine feste Höhe geben? ... Sonst brauchen Sie eine andere Lösung, wenn Sie wollen, dass der Header bleibt und der Inhalt sichtbar und scrollbar ist ... also welcher Weg? – LGSon

Ich möchte beides; der zu fixierende Header und Inhalt (Artikel) soll sichtbar sein und bei großem Inhalt scrollbar sein. – Mitali

Und was sagst du? Muss ich die Höhe der Kopfzeile korrigieren – Mitali

Das gibt mir führen Sie wollten:

header { 
/* Everything else is same as your code*/ 
position: relative; 
} 
header,footer { 
/* Everything else is same as your code*/ 
padding: 1em 0; 
}

Sie legen div Breite 100% und Kopfbreite 100% seiner Eltern, und dann setzen Polsterung links und rechts von 1em (padding: 1em -> seine Polsterung von allen 4 Seiten, Polsterung: 1em 0 -> oben & unten 1em, links & rechts 0).
Warum haben Sie festgelegt? Brauchen Sie Header, um nach oben zu kleben?

div.container { 
    width: 100%; 
    border: 1px solid gray; 
} 
header{ 
    position:fixed; 
    width:100%; 
} 
header, footer { 
    /*padding: 1em 0;*/ 
    color: white; 
    background-color: black; 
    clear: left; 
    text-align: center; 
} 
header h1 { 
    line-height: 2em; 
    font-size: 2em; 
} 
nav { 
    float: left; 
    max-width: 160px; 
    margin: 0; 
    padding: 1em; 
    margin-top: 6em; 
} 
nav ul { 
    list-style-type: none; 
    padding: 0; 
} 
nav ul a { 
    text-decoration: none; 
} 
article { 
    margin-left: 170px; 
    border-left: 1px solid gray; 
    padding: 1em; 
    overflow: hidden; 
    margin-top: 6em; 
}

Quelle

2016-09-19 18:06:06 jare25

machen Aber ich will Header behoben werden und andere Elemente sichtbar zu sein – Mitali

Ja, ich will Header Stick nach oben, auch wenn Fenster scrollt – Mitali

@Mitali können Sie dies versuchen. Ich habe meine Antwort bearbeitet. Versucht, HTML nicht zu berühren, nur CSS. – jare25

Nichts einfach den div-Container vor dem Artikel. Und wenn Sie die Behälterbreite mit min-width ändern möchten: 100%. Aber wenn Sie die gesamte Fenstergröße des Artikels benötigen. Höhe: 100vh; müssen Sie nur Ihre .article-Klasse hinzufügen, die bereits von mir hinzugefügt wurde. nur laufen sie

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
div.container { 
 
    min-width: 100%; 
 
    
 
    border: 1px solid gray; 
 
} 
 
header{ 
 
    postion:fixed; 
 
    width:100%; 
 
    right:0px; 
 
} 
 
header, footer { 
 
    padding: 1em; 
 
    color: white; 
 
    background-color: black; 
 
    clear: left; 
 
    text-align: center; 
 
} 
 

 
nav { 
 
    float: left; 
 
    max-width: 160px; 
 
    margin: 0; 
 
    padding: 1em; 
 
} 
 

 
nav ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
} 
 
\t \t \t 
 
nav ul a { 
 
    text-decoration: none; 
 
} 
 

 
article { 
 
    margin-left: 170px; 
 
    border-left: 1px solid gray; 
 
    padding: 1em; 
 
    overflow: hidden; 
 
    height:100vh; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<header> 
 
    <h1>City Gallery</h1> 
 
</header> 
 
    
 
<nav> 
 
    <ul> 
 
    <li><a href="#">London</a></li> 
 
    <li><a href="#">Paris</a></li> 
 
    <li><a href="#">Tokyo</a></li> 
 
    </ul> 
 
</nav> 
 
    
 
<div class="container"> 
 
<article> 
 
    <h1>London</h1> 
 
    <p>London is the capital city of England. It is the most populous city in 
 
the United Kingdom, with a metropolitan area of over 13 million  
 
inhabitants.</p> 
 
    <p>Standing on the River Thames, London has been a major settlement for 
 
    two millennia, its history going back to its founding by the Romans, who 
 
    named it Londinium.</p> 
 
</article> 
 

 
<footer>Copyright © W3Schools.com</footer> 
 

 
</div> 
 

 
</body> 
 
</html>

Quelle

2016-09-19 18:11:53

ein margin-top (in meinem Beispiel 100px) mit dem ersten nicht-festen Elemente in dem Inhalt Fügen Sie den Platz für die festen Header Sachen zu erstellen, und fügen Sie html, body {margin: 0; } zurücksetzen die Standardränder, die sich auf die Breite Ihres nicht fixierten Inhalts auswirken.

Und auch box-sizing: border-box; für alle Elemente verwenden, um die Grenzen in den prozentualen Breiten zu enthalten. (Siehe Snippet)

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    * { 
 
     box-sizing: border-box; 
 
    } 
 
    body, 
 
    html { 
 
     margin: 0; 
 
    } 
 
    div.container { 
 
     width: 100%; 
 
     border: 1px solid gray; 
 
    } 
 
    header { 
 
     position: fixed; 
 
     width: 100%; 
 
     right: 0px; 
 
    } 
 
    header, 
 
    footer { 
 
     padding: 1em; 
 
     color: white; 
 
     background-color: black; 
 
     clear: left; 
 
     text-align: center; 
 
    } 
 
    nav { 
 
     float: left; 
 
     max-width: 160px; 
 
     margin: 0; 
 
     padding: 1em; 
 
     margin-top: 100px; 
 
    } 
 
    nav ul { 
 
     list-style-type: none; 
 
     padding: 0; 
 
    } 
 
    nav ul a { 
 
     text-decoration: none; 
 
    } 
 
    article { 
 
     margin-left: 170px; 
 
     border-left: 1px solid gray; 
 
     padding: 1em; 
 
     overflow: hidden; 
 
     margin-top: 100px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <div class="container"> 
 

 
    <header> 
 
     <h1>City Gallery</h1> 
 
    </header> 
 

 
    <nav> 
 
     <ul> 
 
     <li><a href="#">London</a> 
 
     </li> 
 
     <li><a href="#">Paris</a> 
 
     </li> 
 
     <li><a href="#">Tokyo</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 

 
    <article> 
 
     <h1>London</h1> 
 
     <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> 
 
     <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> 
 
    </article> 
 

 
    <footer>Copyright © W3Schools.com</footer> 
 

 
    </div> 
 

 
</body> 
 

 
</html>

Quelle

2016-09-19 18:23:42 Johannes

Das funktioniert. Danke! Aber kann ich einen viel optimierten Weg haben, indem ich nicht Rand-Spitze – Mitali

errechne Es hängt nur von der Höhe dieses festen Teils an der Spitze ab. Normalerweise ist das etwas, was du kennst (zum Beispiel eine Kopfzeile mit einem Hintergrundbild, mit dem Text darin), also nimmst du diese Höhe einfach als Rand oben für den nicht fixierten Inhalt. (Übrigens: float und clear haben in einem festen Element keinerlei Auswirkungen - Sie haben ein 'clear: both' in Ihrem Header ...) – Johannes

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 
<body> 

<div data-role="page"> 
    <div data-role="header" data-position="fixed"> 
    <h1>Fixed Header</h1> 
    </div> 

    <div data-role="main" class="ui-content"> 
    <p><b>Tip:</b> To see the effect, try to resize the window if the scrollbar is not available.</p> 

    <p><b>Tip:</b> Tapping the screen will hide and show the header/footer IF the scrollbar is available. The effect varies depending on where you are on the page.</p> 

    <p>Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..</p> 
    </div> 

    <div data-role="footer" data-position="fixed"> 
    <h1>Fixed Footer</h1> 
    </div> 
</div> 

</body> 
</html>

Quelle

2016-09-19 18:25:32

Feste Header-Breite der gleichen Größe wie Container div

Antwort

Verwandte Themen