Jak utworzyć ten układ nagłówka/treści/stopki za pomocą CSS?

______________________ 
|  Header  | 
|______________________| 
|      | 
|      | 
|  Content  | 
|      | 
|      | 
|______________________| 
|  Footer  | 
|______________________|

Chciałbym zrobić ten interfejs, a każdy z nich jest div. Wysokość nagłówka to 30 pikseli. Stopka ma 30 pikseli. Ale nie znam wysokości treści. Do obliczenia muszę użyć ramki użytkownika.Jak utworzyć ten układ nagłówka/treści/stopki za pomocą CSS?

Całkowita wysokość powinna wynosić 100%.

Czy mogę to zrobić w czystym CSS?

Źródło

2011-08-19 DNB5brims

Czy spadkowcy mogą wyjaśnić swoje spadki? Nie znam CSS, więc dla mnie wygląda to doskonale. –

Jestem pewien, że spadki są spowodowane brakiem postrzeganego wysiłku ze strony OP, który jest całkowicie uzasadniony. –

To doskonale poprawne pytanie. To wciąż jest ból i nie jest intuicyjny z CSS. – Glenn

Używanie schematu flexbox, to jest łatwe do osiągnięcia.

Ustaw opakowanie zawierające 3 przedziały na display: flex; i nadaj mu wysokość 100% lub 100vh. Wysokość owijki wypełni całą wysokość, a display: flex; spowoduje, że wszystkie dzieci tego opakowania, które mają odpowiednie właściwości flexu (na przykład flex:1;), będą sterowane za pomocą magii flexbox.

Przykład znaczników:

<div class="wrapper"> 
    <header>I'm a 30px tall header</header> 
    <main>I'm the main-content filling the void!</main> 
    <footer>I'm a 30px tall footer</footer> 
</div>

i CSS, aby go towarzyszyć:

.wrapper { 
    height: 100vh; 
    display: flex; 

    /* Direction of the items, can be row or column */ 
    flex-direction: column; 
} 

header, 
footer { 
    height: 30px; 
} 

main { 
    flex: 1; 
}

Oto ten kod żyć Codepen: http://codepen.io/enjikaka/pen/zxdYjX/left

Można zobaczyć więcej schematu flexbox magii tutaj: http://philipwalton.github.io/solved-by-flexbox/

Albo znajdź dobrze wykonaną dokumentację Re: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

- [Stare odpowiedź poniżej] -

tu proszę: http://jsfiddle.net/pKvxN/

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Layout</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<style> 
    header { 
    height: 30px; 
    background: green; 
    } 
    footer { 
    height: 30px; 
    background: red; 
    } 
</style> 
</head> 
<body> 
    <header> 
    <h1>I am a header</h1> 
    </header> 
    <article> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ligula dolor. 
    </p> 
    </article> 
    <footer> 
    <h4>I am a footer</h4> 
    </footer> 
</body> 
</html>

To działa na wszystkich nowoczesnych przeglądarkach (FF4 +, Chrome, Safari, IE8 i IE9 +)

Źródło

2011-08-19 14:43:26

Ale jak mogę zrobić stopkę, przykleić się do dolnej części ekranu? – DNB5brims

Ale kiedy artykuł staje się bardzo długi, stopka wychodzi z ekranu, a ja muszę przewijać w dół .... Chciałbym zamiast tego przykleić dno. – DNB5brims

http://jsfiddle.net/UpHtc/ | http://jsfiddle.net/SSeQk/ coś w tym stylu –

Oto jak do tego:

Nagłówek i stopka są 30px wysokości.

Stopka przykleiła się do dolnej krawędzi strony.

HTML:

<div id="header"> 
</div> 
<div id="content"> 
</div> 
<div id="footer"> 
</div>

CSS:

#header { 
    height: 30px; 
} 
#footer { 
    height: 30px; 
    position: absolute; 
    bottom: 0; 
} 
body { 
    height: 100%; 
    margin-bottom: 30px; 
}

Wypróbuj jsfiddle: http://jsfiddle.net/Usbuw/

Źródło

2011-08-19 14:38:21 arnaud576875

+1 dobra robota :) miło i łatwo – walialu

+10

To nie działa, jeśli zawartość przekracza wysokość ekranu. Następnie stopka będzie nakładać się na treść, a treść będzie kontynuowana po stopce. – acme

Spróbuj

CSS

.header{ 
    height:30px; 
} 
.Content{ 
    height: 100%; 
    overflow: auto; 
    padding-top: 10px; 
    padding-bottom: 40px; 
} 
.Footer{ 
    position: relative; 
    margin-top: -30px; /* negative value of footer height */ 
    height: 30px; 
    clear:both; 
}

HTML

<body> 
    <div class="Header">Header</div> 
    <div class="Content">Content</div> 
    <div class="Footer">Footer</div> 
    </body>

Źródło

2011-08-19 14:56:16 atrueresistance

Nie działa. "content" nigdy nie osiągnie wysokości 100% w ten sposób. –

Sprawdź datę odpowiedzi. Przeglądarki zmieniły się od 2011 roku. – atrueresistance

Tak, to nie twoja wina, ale lepiej być ostrzeżonym dla tych, którzy użyli kodu, jak ja. :) –

Po błahy wokół chwilę znalazłem rozwiązanie, które działa w> IE7, Chrome, Firefox:

http://jsfiddle.net/xfXaw/

* { 
    margin:0; 
    padding:0; 
} 

html, body { 
    height:100%; 
} 

#wrap { 
    min-height:100%; 

} 

#header { 
    background: red; 
} 

#content { 
    padding-bottom: 50px; 
} 

#footer { 
    height:50px; 
    margin-top:-50px; 
    background: green; 
}

HTML:

<div id="wrap"> 
    <div id="header">header</div> 
    <div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. </div> 
</div> 
<div id="footer">footer</div>

Źródło

2013-10-18 13:54:00 acme

Wypróbuj te

<!DOCTYPE html> 

<html> 

<head> 

<title>Sticky Header and Footer</title> 

<style type="text/css"> 

/* Reset body padding and margins */ 

body { 
    margin:0; 

    padding:0; 
} 

/* Make Header Sticky */ 

#header_container { 

    background:#eee; 

    border:1px solid #666; 

    height:60px; 

    left:0; 

    position:fixed; 

    width:100%; 

    top:0; 
} 

#header { 

    line-height:60px; 

    margin:0 auto; 

    width:940px; 

    text-align:center; 
} 

/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/ 

#container { 

    margin:0 auto; 

    overflow:auto; 

    padding:80px 0; 

    width:940px; 

} 

#content { 

} 

/* Make Footer Sticky */ 

#footer_container { 

    background:#eee; 

    border:1px solid #666; 

    bottom:0; 

    height:60px; 

    left:0; 

    position:fixed; 

    width:100%; 
} 

#footer { 

    line-height:60px; 

    margin:0 auto; 

    width:940px; 

    text-align:center; 

} 

</style> 

</head> 

<body> 

<!-- BEGIN: Sticky Header --> 
<div id="header_container"> 

    <div id="header"> 
     Header Content 
    </div> 

</div> 
<!-- END: Sticky Header --> 

<!-- BEGIN: Page Content --> 
<div id="container"> 

    <div id="content"> 

      content 
     <br /><br /> 
      blah blah blah.. 
     ... 
    </div> 

</div> 
<!-- END: Page Content --> 

<!-- BEGIN: Sticky Footer --> 
<div id="footer_container"> 

    <div id="footer"> 

     Footer Content 

    </div> 

</div> 

<!-- END: Sticky Footer --> 

</body> 

</html>

Źródło

2013-10-24 05:43:48 Anand

Jak utworzyć ten układ nagłówka/treści/stopki za pomocą CSS?

Odpowiedz

Powiązane problemy