Bu Üstbilgi/İçerik/Altbilgi düzeni CSS kullanarak nasıl yapılır?

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

Bu kullanıcı arayüzünü oluşturmak istiyorum ve her biri bir div. Başlık yüksekliği 30 pikseldir. Ve altbilgi 30 pikseldir. Ancak içerik yüksekliğini bilmiyorum. Hesaplamak için kullanıcı çerçevesini kullanmam gerek.Bu Üstbilgi/İçerik/Altbilgi düzeni CSS kullanarak nasıl yapılır?

Toplam yükseklik% 100 olmalıdır.

Saf CSS'de yapabilir miyim?

üstbilgi ve altbilgi 30px yükseklik şunlardır: Burada

kaynak

2011-08-19 DNB5brims

downvoters onların downvotes açıklayabilir deneyin? CSS'yi bilmiyorum, bu bana göre mükemmel bir soru gibi görünüyor. –

Tahmininin, tamamen yasal olan OP'nin algılanan çabasından kaynaklandığından eminim. –

Mükemmel bir soru. Bu hala bir acı ve CSS ile sezgisel değil. – Glenn

, bunu başarmak kolaydır.

3 bölmenizi içeren sargıyı display: flex; olarak ayarlayın ve 100% veya 100vh yüksekliğini verin. Sargının yüksekliği tüm yüksekliği dolduracak ve display: flex;, bu sargıya ait tüm çocukların, flexbox-magic ile kontrol edilmek üzere uygun esnek özelliklere (örneğin flex:1;) sahip olmasına neden olacaktır.

Örnek işaretleme:

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

Ve CSS o eşlik edecek: Burada

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

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

header, 
footer { 
    height: 30px; 
} 

main { 
    flex: 1; 
}

o kod Codepen canlı: http://codepen.io/enjikaka/pen/zxdYjX/left

Burada daha FlexBox-sihirli görebilirsiniz: http://philipwalton.github.io/solved-by-flexbox/

Ya da iyi hazırlanmış bir dokümantasyon bul o re: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

- [Eski cevap aşağıda] - İşte

gittiğiniz: http://jsfiddle.net/pKvxN/ tüm modern tarayıcılarda (FF4 +, Chrome, Safari IE8 ve IE9 çalışır

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

kaynak

2011-08-19 14:43:26

Ancak altbilgiyi ekranın alt kısmına nasıl yapıştırabilirim? – DNB5brims

Ama makale çok uzun olduğunda, altbilgi ekran dışına, ve aşağı kaydırmak gerekir .... Ben yerine altını yapıştırmak istiyorum. – DNB5brims

http://jsfiddle.net/UpHtc/ | http://jsfiddle.net/SSeQk/ –

nasıl o etmektir.

Altbilgi, sayfanın altına yapışmış.

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; 
}

jsfiddle Deneyin: flexbox'a kullanma http://jsfiddle.net/Usbuw/

kaynak

2011-08-19 14:38:21 arnaud576875

+1 iyi çalışma :) güzel ve kolay – walialu

+10

İçerik, ekranın yüksekliğini aşarsa bu işe yaramaz. Daha sonra altbilgi içeriği üst üste gelecek ve içerik altbilgi sonrasında devam edecektir. – acme

CSS deneyin

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

kaynak

2011-08-19 14:56:16 atrueresistance

Çalışmıyor. "içerik" bu şekilde asla% 100 yüksekliğe sahip olmayacaktır. –

Cevaplanan tarihe bakın. Tarayıcılar 2011'den beri değişti. – atrueresistance

Evet, bu senin suçun değil, ama benim de benim gibi kodları kullananlar için uyarılır. :) –

ben> de IE7, Chrome, Firefox çalışan bir çözüm buldu Bir süre daha uğraşırsanız sonra:

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>

kaynak

2013-10-18 13:54:00 acme

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

kaynak

2013-10-24 05:43:48 Anand

Bu Üstbilgi/İçerik/Altbilgi düzeni CSS kullanarak nasıl yapılır?

cevap

İlgili konular