Layout với tiêu đề cố định và footer, chiều rộng sidebar cố định và nội dung linh hoạt

Tôi đang cố gắng thiết lập một bố cục mà sẽ trông như thế này: enter image description here Layout với tiêu đề cố định và footer, chiều rộng sidebar cố định và nội dung linh hoạt

Tôi muốn sử dụng twitter bootstrap cho dự án, nhưng tôi hiểu nó có thể không phải là cách tốt nhất để đi cho bố cục cơ bản trông như thế này. Tôi biết cách thiết lập đầu trang và chân trang được cố định ở trên cùng và dưới cùng, nhưng tôi gặp khó khăn khi có chiều rộng cố định của thanh bên và độc lập có thể cuộn được.

Triển khai hiện tại của tôi ở đây: http://jsfiddle.net/Mwkrw/3/.

Tôi đã thử thiết lập thanh bên cố định bằng cách sử dụng Fixed sidebar navigation in fluid twitter bootstrap 2.0 và một số câu trả lời tương tự khác trên ngăn xếp ngăn xếp, nhưng tất cả đều bị ngắt khi thanh bên dài hơn nội dung và theo tôi biết không có cách nào cuộn độc lập.

Tôi lý tưởng muốn làm điều này với css thuần túy - không có javascript. Tôi chắc chắn rằng nó có thể và đó là thiếu kỹ năng và kiến thức của tôi mà ngăn cản tôi hình thức làm đúng cách, do đó, có thể không có điểm trong việc thêm mã javascript không cần thiết. (Tôi vẫn đang thêm thẻ javascript trong trường hợp không thể thực hiện được)

Cảm ơn tất cả trợ giúp!

EDIT: Vì vậy, tiêu đề của tôi rõ ràng không cần phải là vị trí cố định. Đây là phiên bản mới và cải tiến: http://jsfiddle.net/Mwkrw/4/ Tôi vẫn đang đấu tranh với hai div di chuyển được.

Nguồn

2012-05-06 mck

Phép thuật nằm trong box-sizing:border-box;. Để tương thích với Firefox, chrome < 10 và safari < 5.1, thêm tiền tố -webkit- và -moz-. IE hỗ trợ nó là 8.0.

<!doctype html> 
<html lang='en'> 
    <head> 
     <meta charset='utf-8'> 
     <title>very structured layout</title> 
     <style type='text/css'> 
      *  {margin:0; padding:0;} 
      body {background:#fff; position:absolute; width:100%; height:100%;} 
      #main {background:#888; height:100%; padding:60px 0 40px; box-sizing:border-box;} 
      #head {background:#f8f; position:absolute; width:100%; height:60px;} 
      #left {background:#ff8; float:left; width:250px; height:100%; overflow:scroll;} 
      #right {background:#8f8; height:100%; overflow:scroll;} 
      #foot {background:#f88; position:absolute; bottom:0; width:100%; height:40px;} 
     </style> 
    </head> 
    <body> 
     <div id='head'>header: width = 100%, height = 40px</div> 
     <div id='main'> 
      <div id='left'>left: width = 250px, height = 100%</div> 
      <div id='right'>right: width = 100% - 250px, height = 100%</div> 
     </div> 
     <div id='foot'>foot: width = 100%, height = 60px</div> 
    </body> 
</html>

fiddle

chỉnh sửa: sau khi Andres' giải pháp khiến tôi nhận ra tôi có thể đạt được khả năng tương thích cao hơn, tôi messed xung quanh một chút và đã đưa ra một giải pháp thay thế, mà tôi nghĩ là trực quan hơn cũng . Nó không hoạt động trong IE7, nhưng nó hoạt động trong IE8.

Các trang web là tương tự như trên, với sự thay đổi duy nhất là CSS được thay thế bằng này:

*  {margin:0; padding:0;} 
body {background:#fff;} 
#main {background:#888; position:absolute; top:40px; bottom:60px; width:100%;} 
#head {background:#f8f; position:absolute; width:100%; height:40px;} 
#left {background:#ff8; position:absolute; width:250px; height:100%; overflow:scroll;} 
#right {background:#8f8; margin-left:250px; height:100%; overflow:scroll;} 
#foot {background:#f88; position:absolute; bottom:0; width:100%; height:60px;}

fiddle

Lưu ý rằng, đối với cả hai phiên bản, #head và #foot cần phải có một tài sản overflow khác với visible nếu nội dung của chúng có thể mở rộng ra khỏi trang.

Nguồn

2012-05-07 03:45:44

Oh man. Điều đó có vẻ hoàn hảo! Tôi sẽ kiểm tra điều này đúng vào ngày mai và chấp nhận. Cảm ơn bạn! Tôi đã không bao giờ nghe nói về 'box-sizing' trước đây. – mck

không sao cả. nếu bạn nghĩ rằng kích thước hộp là hữu ích, chỉ cần đợi cho đến khi chúng tôi có hỗ trợ cho bố cục hộp. cung cấp cho nó một vài năm và chúng tôi thậm chí có thể viết css rằng * không phải là * một loạt các hack. –

Điều đó thật tuyệt. Tôi vẫn còn bối rối bởi rất nhiều thứ trong css. Twitter-bootstrap thực hiện rất nhiều thứ có vẻ như họ nên có ngay từ đầu. (cách để xây dựng bố trí ví dụ) – mck

Tôi đã quản lý bố cục bạn đã tạo trong bài đăng của mình bằng cách tạo một lớp chứa chính được kéo dài 100% cả theo chiều dọc và chiều ngang, theo cách này, chúng tôi có thể kéo toàn bộ nội dung trong phạm vi chiều cao đầy đủ của chế độ xem. Trong div container này, tôi đã tạo ra một container khác và định vị nó hoàn toàn trong khi kéo dài nó theo mọi hướng, top, left, bottom, right, tôi cảm thấy rằng phương pháp này sạch hơn, vì vậy tôi có thể dễ dàng định vị đầu trang và chân trang mà không cần biên độ âm nhưng nó không hoạt động).

Đây là bản trình diễn bố cục: http://jsfiddle.net/andresilich/gbzTN/1/show, chỉnh sửa here.

Và mã:

CSS

html, body { 
    height: 100%; 
} 

.main { 
    *zoom:1; 
} 

.main, .row-fluid { 
    height: 100%; 
} 

.main:before, .main:after, 
.column:before, .column:after { 
    content: ""; 
    display: table; 
} 

.main:after, 
.column:after { 
    clear: both; 
} 

.column { 
    height: 100%; 
    overflow: auto; 
    *zoom:1; 
} 

.column .padding { 
    padding: 20px; 
} 

.box { 
    bottom: 40px; 
    left: 0; 
    position: absolute; 
    right: 0; 
    top: 40px; 
} 

.span9.full { 
    width: 100%; 
} 

.footer { 
    height: 40px; 
    width: 100%; 
    z-index: 100; 
    background-color: red; 
    bottom: 0; 
    left:0; 
    right:0; 
    position: fixed; 
}

HTML

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container-fluid"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 
     <a class="brand" href="#">Project name</a> 
     <div class="btn-group pull-right"> 
     <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
      <i class="icon-user"></i> Username 
      <span class="caret"></span> 
     </a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Profile</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Sign Out</a></li> 
     </ul> 
     </div> 
     <div class="nav-collapse"> 
     <ul class="nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
     </ul> 
     </div><!--/.nav-collapse --> 
    </div> 
    </div> 
</div> 
<div class="main clearfix"> 
    <div class="box"> 
     <div class="row-fluid"> 
      <div class="column span3"> 
       <div class="padding"> 
        .. content .. 
       </div> 
      </div> 
      <div class="column span9"> 
       <div class="padding"> 
        <div class="full span9"> 
         .. content .. 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="footer clearfix"> 
    <h3>footer</h3> 
</div>

Sửa: nhận thấy rằng giải pháp này không hoạt động như mong đợi trong IE7 (chỉ hoạt động hoàn hảo trong IE8 trở lên) vì vậy đây là một bình luận có điều kiện nhắm mục tiêu tất cả mọi thứ dưới đây IE8 rằng nên khắc phục vấn đề và làm cho nó làm việc như mong đợi:

CSS

<!--[if lt IE 8]> 
    <style type="text/css"> 
     html { 
      margin: 40px 0px; 
      overflow: hidden 
     } 

     .main { 
      zoom:1; 
     } 

     .column { 
      overflow-x: hidden !important; 
      overflow-y: scroll !important; 
      zoom: 1; 
     } 

     .box { 
      position: relative !important; 
      min-height: 100%; 
      height:100%; 
      zoom: 1; 
      top:0 !important; 
     } 

     .main { 
      margin: 40px 0px; 
     } 
    </style> 
<![endif]-->

Nguồn

2012-05-08 16:47:11

Bản trình diễn dành cho IE7 trở xuống: http://jsbin.com/umabuz/5/ –

Xin chào, cảm ơn vì điều này! Nó có vẻ tốt đặc biệt là bạn đã đi với twitter bootstrap trên toàn bộ điều. Tuy nhiên tôi đã quyết định sử dụng giải pháp của boost. Nó chỉ có vẻ như nó dễ dàng hơn để thực hiện. Cảm ơn cho điều này mặc dù! – mck

@MaciekAlbin yeah đó là một giải pháp tốt, cuộc cãi vã của tôi với nó là hỗ trợ, 'box-sizing' chỉ được hỗ trợ bởi IE8 +. –

Bây giờ Bootstrap 4 là ra tôi nghĩ một số có thể được hưởng lợi từ cách bố trí này mà bây giờ là một là dễ dàng hơn nhờ flexbox.

Bootstrap 4 Demo

<body class="container-fluid d-flex flex-column h-100 align-items-center px-0"> 
<div class="row grow w-100"> 
    <div class="header col-12 bg-primary py-2"> 
     Header 
    </div> 
    <div class="side col-3 bg-light py-3 pl-0"> 
     Menu 
    </div> 
    <div class="main col bg-warning py-3"> 
     Main 
    </div> 
</div> 
<div class="row w-100 footer bg-danger"> 
    <div class="col-12 py-3"> 
     Footer 
    </div> 
</div> 
</body> 

.grow { 
    flex: 1; 
    overflow: hidden; 
} 

.main,.side { 
    overflow-y: auto; 
    height:calc(100% - 55px); 
} 

.footer,.header { 
    height: 55px; 
}

Nguồn

2018-02-26 13:21:05 ZimSystem

Layout với tiêu đề cố định và footer, chiều rộng sidebar cố định và nội dung linh hoạt

Trả lời

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