Nếu tôi có một vùng chứa có chiều rộng 75% và hai cột bên trong, bên trái và bên phải, với chiều rộng trái là 10em, làm cách nào để có được vùng chứa thích hợp chiếm 100% dung lượng còn lại?Làm cách nào để thực hiện div được thả nổi bên trái chiếm 100% không gian còn lại?

Tôi cố gắng này không có may mắn:

html, body { 
 
    margin:0; 
 
    padding:0; 
 
    width:100%; 
 
    height:100%; 
 
} 
 
#container { 
 
    position:relative; 
 
    width:75%; 
 
    margin:0 auto; 
 
    background:blue; 
 
} 
 
#left-container { 
 
    position:relative; 
 
    float:left; 
 
    height:100%; 
 
    width:10em; 
 
    background:red; 
 
} 
 
#right-container { 
 
    position:relative; 
 
    float:left; 
 
    height:100%; 
 
    width:100%; 
 
    background:yellow; 
 
}

<div id="container"> 
 
    <div id="left-container">Left</div> 
 
    <div id="right-container">Right</div> 
 
</div>

tôi có thể làm điều này một cách dễ dàng với tỷ lệ phần trăm, nhưng tôi cần còn lại để trở thành một chiều rộng 10em cố định.

Nguồn

2013-05-01 Michael N

Bạn có thể làm cho một yếu tố hộp mất thời gian còn lại của không gian bằng cách loại bỏ float: left, loại bỏ các width và thêm overflow:hidden đến đúngdiv

Working example

#right-container { 
    position:relative; 
    overflow: hidden; 
    height:100%; 
    background:yellow; 
}

Nguồn

2013-05-01 01:20:01

Oh wow, đó là đơn giản hơn nhiều hơn tôi nghĩ nó sẽ là. Tôi chưa bao giờ nghĩ về điều này. Cảm ơn bạn! –

@MichaelN Bạn được chào đón, tôi nhớ có vấn đề này khi tôi bắt đầu và nó đã cho tôi * giờ * trước khi tôi nhận ra điều này. Đó là một mẹo hay, đừng quên nó :) –

Tác phẩm này trên Firefox nhưng không phải trên Chrome, bro. Phiên bản Chrome của tôi là 51. Cảm ơn câu trả lời của bạn, tôi đang tìm sự cố này – Ben

Một lựa chọn khác là đặt lề trái trên #right-container div:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 
html, body { 
    margin:0; 
    padding:0; 
    width:100%; 
    height:100%; 
} 
#container { 
    position:relative; 
    width:75%; 
    margin:0 auto; 
    background:blue; 
} 
#left-container { 
    position:relative; 
    float:left; 
    height:100%; 
    width:10em; 
    background:red; 
} 
#right-container { 
    position:relative; 
    margin-left: 11em; 
    height:100%; 
    background:yellow; 
} 
</style> 

</head> 
<body> 

<div id="container"> 
    <div id="left-container"> 
     Left 
    </div> 
    <div id="right-container"> 
     Right 
    </div> 
</div> 

</body> 
</html>

Nguồn

2013-05-01 01:50:06

Tôi muốn add-in tùy chọn khác như sau:

#header-left-section { 
    float: left; 
    position: absolute; 
    z-index: 1000; 
} 
#header-right-section { 
    height: 90px; 
    width:100%; 
    position: relative; 
    overflow: hidden; 
} 
#header-right-section ins, 
#header-right-section div{float:right}

Các div trái chỉ mất đủ không gian cho những thứ bên trong của nó. Phần bên phải chiếm 100% chiều rộng và phần bên trái nằm phía trên nó chỉ còn lại (theo chỉ mục z). Dòng css cuối cùng chỉ để tạo nội dung bên trong nếu div bên phải được thả nổi ở bên phải.

Nguồn

2016-06-12 03:22:22 Ben

Có ít nhất 2 lựa chọn cho loại vấn đề tại thời điểm này (2016) sử dụng CSS3, giải pháp đơn giản hơn nhiều so với câu trả lời được chấp nhận, đó là loại một "hack" sử dụng overflow:hidden

sử dụng flexbox

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#container { 
 
    width: 75%; 
 
    margin: 0 auto; 
 
    background: blue; 
 
    display: flex 
 
} 
 
#left-container { 
 
    height: 100%; 
 
    width: 10em; 
 
    background: red; 
 
} 
 
#right-container { 
 
    height: 100%; 
 
    flex:1; 
 
    background: yellow; 
 
}

<div id="container"> 
 
    <div id="left-container">Left</div> 
 
    <div id="right-container">Right</div> 
 
</div>

sử dụng calc()

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#container { 
 
    width: 75%; 
 
    margin: 0 auto; 
 
    background: blue; 
 
} 
 
#left-container { 
 
    float: left; 
 
    height: 100%; 
 
    width: 10em; 
 
    background: red; 
 
} 
 
#right-container { 
 
    float: left; 
 
    height: 100%; 
 
    width: calc(100% - 10em); 
 
    background: yellow; 
 
}

<div id="container"> 
 
    <div id="left-container">Left</div> 
 
    <div id="right-container">Right</div> 
 
</div>

Nguồn

2016-06-12 03:37:21 dippas

Làm cách nào để thực hiện div được thả nổi bên trái chiếm 100% không gian còn lại?

Trả lời

Working example

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