Cố định sidebar với 100% chiều cao trong CSS

tôi đang làm một sidebar cố định mà tôi giải quyết here in stack overflow, vì vậy bây giờ tôi có một thanh cố định với mã này:Cố định sidebar với 100% chiều cao trong CSS

<div id="main" style="width:100%;background:red;"> 
    <div id="sidemenu" style="float:left;height:200px;background:#000;"> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
    </div> 
    <div id="content" style="height:200px;overflow-y:scroll;background:silver;"> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
    </div> 
</div>

Nó có chiều cao 200px (chỉ để xem cách nó hoạt động), nhưng thanh bên tôi cần phải có chiều cao 100% mọi lúc. Tôi đã thấy các bài viết khác nhau ở đây trong stackoverflow mà nói rằng cột giả là một lựa chọn: http://www.alistapart.com/articles/fauxcolumns/. Nhưng bên trong của tôi <div id="sidebar"> Tôi sẽ có, trong một số trường hợp, thêm 2 DIV: #menu và #submenu, do đó, chiều rộng sẽ thay đổi.

Tôi có thể làm gì? Tôi không cần hỗ trợ cho các trình duyệt cũ: IE9, Chrome mới nhất và Firefox mới nhất là OK.

Nguồn

2011-11-03 udexter

Tôi muốn thêm border-left vào thân, lấy mục menu dài nhất và khớp với chiều rộng bằng ems, sau đó đặt lề âm trên thanh bên. Sau đó, nó sẽ xuất hiện để phù hợp với bất cứ điều gì chiều cao div nội dung chiếm (hoặc nếu bạn đặt nó một cách rõ ràng, hoặc nếu nội dung mở rộng nó):

<body style="border-left: 10em solid #666;"> 

<div id="main" style="background:red;"> 
    <div id="sidemenu" style="float:left;margin-left: -10em;width:10em;background:#666;"> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
     very long menu item<br /> 
     menu<br /> 
     menu<br /> 
    </div> 
    <div id="content" style="height:400px;background:silver;"> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
    </div> 
</div> 

</body>

Đối với một bên với một nền tảng kết cấu (một phương pháp), bạn có thể thiết lập chiều rộng bằng pixel để phù hợp với chiều rộng của kết cấu (không linh động như ems nhưng nếu đặt vào mục rộng nhất, sẽ không sao) và lặp đi lặp lại kết cấu dọc theo trục y:

<div id="main" style="background: url(pattern_157.gif) repeat-y;"> 
    <div id="sidemenu" style="float:left;width:200px;background: transparent;"> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
     very long menu item<br /> 
     menu<br /> 
     menu<br /> 
    </div> 
    <div id="content" style="height:600px;background:transparent;"> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
    </div> 
</div>

Nguồn

2011-11-03 09:50:31

hey @Dave! Đây là một giải pháp tốt nhưng ... những gì sẽ xảy ra nếu sidemenu có một hình nền (một kết cấu) làm thế nào bạn sẽ giải quyết được điều đó? Cảm ơn bạn trước! – udexter

@udexter - một ví dụ được thêm vào câu trả lời ở trên - có một số cách để làm điều này, nhưng đây là một trong những điều đầu tiên xuất hiện ... –

là vấn đề mà nền cột của bạn có một số loại gradient? Nếu nó chỉ là màu đồng nhất, bạn có thể không chỉ để lại độ rộng của 2 cột không được đặt và gạch hình nền trên trục x cũng như trên trục y?

Nguồn

2011-11-03 09:52:54 Brighty

vâng, nó có kết cấu đính kèm – udexter

Làm thế nào về việc bạn đã tạo hình ảnh kết cấu của mình Rộng 9000px, nhưng đặt div nội dung ở chỉ mục z cao hơn div bên lề? – Brighty

Đây là một ý tưởng khác cho việc này bằng cách sử dụng vị trí cố định và chiều cao 100%. Tôi cũng đặt đủ chỗ ngắt trong đó để cho biết nội dung sẽ cuộn như thế nào, nhưng thanh bên và nội dung của nó sẽ ở nguyên vị trí đó.

<body style="margin:0;"> 
    <div id="main"> 
     <div id="sidemenu" style="width:200px; position:fixed; height:100%; background: url(http://www.bittbox.com/wp-content/uploads/2007/12/free_grunge_paper_1.jpg) repeat;"> 
      menu<br /> 
      menu<br /> 
      menu<br /> 
      very long menu item<br /> 
      menu<br /> 
      menu<br /> 
     </div> 
     <div id="content" style="background:transparent; float:left; margin:0 0 0 220px;"> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
     </div> 
    </div> 
</body>

Nguồn

2012-07-02 15:57:31

Cố định sidebar với 100% chiều cao trong CSS

Trả lời

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