CSS Layout với kích thước đầy đủ navbar trái và tiêu đề

Tôi muốn có cách bố trí sauCSS Layout với kích thước đầy đủ navbar trái và tiêu đề

+++++++++++++++++++++++ 
+Header    + 
+++++++++++++++++++++++ 
+Nav+     + 
+ +     + 
+ +     + 
+ +  Content + 
+ +     + 
+++++++++++++++++++++++

nên về cơ bản một cách bố trí hai cột với tiêu đề. Tôi đã kiểm tra nhiều trình tạo bố trí CSS trên mạng, nhưng chúng chỉ tạo cho tôi kết quả khi thanh điều hướng bên trái lớn bằng nội dung trong đó. Tôi có thể mở rộng nó với "chiều cao: 500px" hoặc bất cứ điều gì, nhưng tôi muốn nó được fullsize (từ trên xuống dưới cửa sổ trình duyệt) tất cả các thời gian. Thay đổi giá trị bằng "height: 100%" không hoạt động. Nếu bạn muốn tự mình thử: http://guidefordesign.com/css_generator.php và sau đó chọn toàn bộ trang, bố cục hai cột, với tiêu đề để xem ý tôi là gì. Nếu bạn muốn, bạn có thể cho tôi biết là tài sản tôi phải điều chỉnh trong file css tạo ra để làm cho nó hoạt

Nguồn

2010-08-11 Dave

Bạn có thể muốn có một cái nhìn tại và nhận được ý tưởng từ:

Super Simple Two Column Layout

See the demo here.

Nguồn

2010-08-11 07:37:09 Sarfraz

Câu trả lời chung nhỏ: Nhìn vào khuôn khổ CSS, như http://www.blueprintcss.org/ - chúng cho phép bạn xác định lưới.

Dưới đây là một trang mẫu: http://www.blueprintcss.org/tests/parts/sample.html

Liên quan đến vấn đề chiều cao, hãy thử này (nên cung cấp cho bạn 100% chiều cao cửa sổ trình duyệt cho div của bạn tất cả các thời gian):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
    <title>Test Page</title> 
    <style type="text/css"> 
    body { 
     padding: 0px; 
    } 
    .Container { 
     height: 100%; 
     width: 100%; 
     margin: 0px; 
     padding: 0px; 
     background-color: #123456; 
     color: black; 
    } 
    </style> 
</head> 
<body> 
    <div class="Container"> 
    </div> 
</body> 
</html>

Nguồn

2010-08-11 07:39:36 miku

Một giải pháp bạn có thể thử, là cung cấp cho khu vực nội dung hình ảnh nền được lặp lại theo chiều dọc (chiều cao và chiều rộng 1px của trang). Phía bên trái của hình ảnh đó sẽ có màu nền của điều hướng và phần còn lại sẽ là màu của màu nền nội dung ...

Nguồn

2010-08-11 07:53:28 Naruto

Bạn có thể thử điều này. Nó hoạt động trên các trình duyệt tôi đã thử nghiệm (Firefox, IE7 + 8, Opera, Safari, Chrome). Chỉ cần chơi xung quanh với các đơn vị phần trăm cho tiêu đề và cột.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>for stackoverflow</title> 
    <style> 
    body, html { 
     padding : 0px; 
     margin : 0px; 
     height : 100%; 
    } 

    #wrapper { 
     width:900px; 
     height:100%; 
     margin: 0px; 
     padding: 0px; 
    } 

    #header { 
     height:10%; 
     background-color:#930; 
     width:900px; 
    } 

    #nav { 
     background-color:#999; 
     width:200px; 
     height:90%; 
     float:left; 
    } 

    #content { 
     height:90%; 
     background-color:#363; 
     width:700px; 
     float:left; 
    } 
    </style> 
</head> 

<body> 
<div id="wrapper"> 
    <div id="header"></div> 
    <div id="nav"></div> 
    <div id="content"></div> 
</div> 
</body>

Nguồn

2010-08-11 09:23:21 Sotiris

Câu trả lời hay nhưng bạn không nắm quyền kiểm soát thuộc tính 'chiều cao '. Đơn giản chỉ cần thiết lập 'width' và' float: left' thực hiện thủ thuật. – beautifulcoder

CSS Layout với kích thước đầy đủ navbar trái và tiêu đề

Trả lời

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