Tạo bố cục hỗn hợp pixel/phần trăm với số div

Question

Tôi đang cố tạo bố cục trang như có thể thấy trong ảnh đính kèm. Vấn đề là tôi không thể làm cho nó hoạt động đúng. Tôi đã dành nửa ngày cố gắng để làm cho nó hoạt động, nhưng không thành công. Tôi chỉ muốn một div chiều rộng cố định cho trình đơn và bên cạnh đó hai divs tạo cột mà mỗi một mất một nửa chiều rộng trang còn lại. Heights tất cả cần phải phụ thuộc vào nội dung.

Bất kỳ ai có ý tưởng? Tôi có thể tìm thấy nhiều thông tin về bố cục hỗn hợp/điểm ảnh hỗn hợp này, nhưng tôi không thể tưởng tượng được điều đó là khó.

Ảnh:

Answer 1

Something như thế:

<style type="text/css"> 
.container 
{ 
    padding-left: 160px; 
    position: relative; 
} 
.leftmenu 
{ 
    width: 160px; 
    height: 200px; 
    background: red; /* For demo purposes */ 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
.width50 
{ 
    width: 50%; 
    float: left; 
} 
.left-content 
{ 
    height: 300px; 
    background: green /* For demo purposes */ 
} 
.right-content 
{ 
    height: 150px; 
    background: blue /* For demo purposes */ 
} 
.clear 
{ 
    clear: both; 
} 
</style> 
<div class="container"> 
    <div class="leftmenu"></div> 
    <div class="content"> 
    <div class="width50 left-content"></div> 
    <div class="width50 right-content"></div> 
    <div class="clear"></div> 
    </div> 
</div> 

Đó chỉ là thùng chứa bên trong (không có header hay footer)

Answer 2

Một cách tiếp cận javascript.

Ở đây tôi đã tạo bố cục chính xác mà bạn cần. Check this link.

Kích thước lại trình duyệt và làm mới trình duyệt. Bạn có thể thấy rằng làm việc!

Tôi đã sử dụng tập lệnh sau để tìm độ phân giải màn hình và sau đó tính chiều rộng của nội dung.

<script type="text/javascript"> 
wscreen = window.innerWidth; //Determine screen resolution 
content_width = (wscreen - 160); //Adjusting the screen 
document.getElementById("container").style.width = content_width + "px"; // Adding the width to CSS 
</script> 

Phương pháp CSS nguyên bản cũng sẽ hoạt động.

Chúc mừng !!!