使div充滿剩餘空間

我有3個divs conconined內外部div。我將它們水平放置在左邊。和div3爲浮動權使div充滿剩餘空間

<div id="outer"> 

    <div id="div1">always shows</div> 
    <div id="div2">always shows</div> 
    <div id="div3">sometimes shows</div> 
</div>

div1和div3具有固定大小。如果div3被遺漏了，我想div 2填補餘下的空間。我該怎麼做？

來源

2011-02-18 raklos

http://jsfiddle.net/ – acm

這樣的事情呢？ https://jsfiddle.net/Siculus/9vs5nzy2/

CSS：

#container{ 
    width: 100%; 
    float:left; 
    overflow:hidden; /* instead of clearfix div */ 
} 
#right{ 
    float:right; 
    width:50px; 
    background:yellow; 
} 
#left{ 
    float:left; 
    width:50px; 
    background:red; 
} 
#remaining{ 
    overflow: hidden; 
    background:#DEDEDE; 
}

身體：

<div id="container"> 
    <div id="right">div3</div> 

    <div id="left">div1</div> 

    <div id="remaining">div2, remaining</div> 
</div>

來源

2011-02-18 16:29:09 stecb

您的解決方案成就了我的一天！謝謝！！ –

輝煌的工作！ –

jsfiddle鏈接似乎死了 – Wyck

你不需要浮動#div2，它會自動填充剩餘空間。

如果你想邊框/填充，你應該給#div2一個子元素。

來源

2011-02-18 16:30:08 zzzzBov

這是使用display: table;https://jsfiddle.net/sxk509x2/

瀏覽器支持的技術（即11+）：http://caniuse.com/#feat=css-table

HTML

<div class="outer"> 
    <div class="static pretty pretty-extended">$</div> 
    <input class="dynamic pretty" type="number" /> 
    <div class="static pretty">.00</div> 
</div>

CSS

.outer{ 
    width:300px; 
    height:34px; 
    display:table; 
    position: relative; 
    box-sizing: border-box; 
} 
.static{ 
    display:table-cell; 
    vertical-align:middle; 
    box-sizing: border-box; 
} 
.dynamic{ 
    display:table-cell; 
    vertical-align:middle; 
    box-sizing: border-box; 
    width: 100%; 
    height:100%; 
} 
.pretty{ 
    border: 1px solid #ccc; 
    padding-left: 7px; 
    padding-right: 7px; 
    font-size:16px; 
} 
.pretty-extended{ 
    background: #eee; 
    text-align:center; 
}

的類包含「漂亮「沒有要求成就噓你想要做什麼。我只是添加他們的外觀。

來源

2017-02-26 15:10:53 KernelSanders213

使div充滿剩餘空間

回答

相關問題