Cách tạo bố cục Tiêu đề/Nội dung/Chân trang này bằng cách sử dụng CSS?

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

Tôi muốn tạo giao diện người dùng này và mỗi giao diện là một div. Chiều cao tiêu đề là 30px. Và chân trang là 30px. Nhưng tôi không biết chiều cao nội dung. Tôi cần phải sử dụng khung người dùng để tính toán.Cách tạo bố cục Tiêu đề/Nội dung/Chân trang này bằng cách sử dụng CSS?

Tổng chiều cao phải là 100%.

Tôi có thể làm điều đó trong CSS thuần túy không?

Nguồn

2011-08-19 DNB5brims

Trình gỡ xuống có thể giải thích các downvotes của họ không? Tôi không biết CSS, vì vậy đây trông giống như một câu hỏi hoàn hảo cho tôi. –

Tôi chắc chắn các downvotes là do thiếu nỗ lực nhận thức trên một phần của OP, đó là hoàn toàn hợp pháp. –

Đó là một câu hỏi hoàn toàn hợp lệ. Đây vẫn là một nỗi đau và không trực quan với CSS. – Glenn

Sử dụng flexbox, điều này rất dễ dàng để đạt được.

Đặt trình bao bọc chứa 3 ngăn của bạn thành display: flex; và đặt chiều cao là 100% hoặc 100vh. Chiều cao của wrapper sẽ lấp đầy toàn bộ chiều cao, và display: flex; sẽ làm cho tất cả trẻ em của wrapper này có các thuộc tính flex thích hợp (ví dụ flex:1;) để được điều khiển bằng flexbox-magic.

đánh dấu Ví dụ:

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

Và CSS để đi cùng với nó:

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

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

header, 
footer { 
    height: 30px; 
} 

main { 
    flex: 1; 
}

Dưới đây là mã mà sống trên Codepen: http://codepen.io/enjikaka/pen/zxdYjX/left

Bạn có thể xem chi tiết flexbox-ma thuật ở đây: http://philipwalton.github.io/solved-by-flexbox/

Hoặc tìm tài liệu được làm tốt re: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

- [Cũ câu trả lời dưới đây] -

Ở đây bạn đi: 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>

đó làm việc trên tất cả các trình duyệt hiện đại (FF4 +, Chrome, Safari, IE8 và IE9 +)

Nguồn

2011-08-19 14:43:26

Nhưng làm thế nào tôi có thể làm chân trang dính vào đáy màn hình? – DNB5brims

Nhưng khi bài viết trở nên rất dài, chân trang ra khỏi màn hình, và tôi cần phải cuộn xuống .... Thay vào đó tôi muốn dính vào đáy. – DNB5brims

http://jsfiddle.net/UpHtc/ | http://jsfiddle.net/SSeQk/ một cái gì đó như thế –

Đây là cách thực hiện:

Đầu trang và chân trang có chiều cao 30px.

Chân trang bị kẹt ở cuối trang.

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

Thử nó trên jsfiddle: http://jsfiddle.net/Usbuw/

Nguồn

2011-08-19 14:38:21 arnaud576875

+1 công việc tốt :) đẹp và dễ dàng – walialu

+10

Điều này không hoạt động nếu nội dung vượt quá chiều cao màn hình. Sau đó, chân trang sẽ chồng chéo nội dung và nội dung sẽ tiếp tục sau chân trang. – acme

Hãy thử điều này

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>

Nguồn

2011-08-19 14:56:16 atrueresistance

Không hoạt động. "nội dung" sẽ không bao giờ có chiều cao 100% theo cách này. –

Nhìn vào ngày trả lời. Các trình duyệt đã thay đổi kể từ năm 2011. – atrueresistance

Vâng, đó không phải lỗi của bạn, nhưng tốt hơn nên được cảnh báo cho những người đã sử dụng mã, như tôi. :) –

Sau khi quan trọng xung quanh một thời gian tôi tìm thấy một giải pháp mà làm việc trong> 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>

Nguồn

2013-10-18 13:54:00 acme

Hãy thử Điều này

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

Nguồn

2013-10-24 05:43:48 Anand

Cách tạo bố cục Tiêu đề/Nội dung/Chân trang này bằng cách sử dụng CSS?

Trả lời

Các vấn đề liên quan