div繼承寬度和高度和滾動

我怎樣才能使DIV從它的容器中繼承它的寬度和高度而沒有固定的定義高度和寬度，默認覆蓋容器內的整個區域並滾動而不是增加其高度或寬度。例如div繼承寬度和高度和滾動

<td style="width:400px; "> 
<div style="overflow:scroll; "> 
</div> 
</td>

此DIV應涵蓋400像素，並且當該含量超過從該寬度應該滾動。該容器可以是TD或SPAN。一種方法可能是隻使用一個定義寬度的CSS類並應用於容器和div，但是，我不知道該DIV將被使用的位置以及容器的寬度。

編輯1 通過設置最大寬度爲100px我得到我想要的，但否則它會增加容器的寬度。這可能是因爲容器的寬度爲％。它看起來我需要找到容器的初始寬度，然後設置DIV的最大寬度。是嗎？

編輯2 有這個div內的網格。當最大寬度以DIV樣式定義時，它反映了我通過JS設置時需要的行爲，當頁面加載時寬度正常，但單擊鏈接以加載網格內的數據時，它會丟失最大寬度屬性。

<script type="text/javascript"> 
    var w = document.getElementById("divgrid").style.maxWidth; 
    if (w == null || w == NaN || w <= 0 || w.toString() == '') 
    w = document.getElementById("divgrid").offsetWidth; 
    document.getElementById('divgrid').style.maxWidth = w + 'px'; 
</script>

來源

2013-02-09 bjan

width:100%; height:100%; overflow:scroll;

來源

2013-02-09 08:03:58 codetantra

你已經錯過了:) – bjan 2013-02-09 08:06:44

你挑了兩個有趣的容器元素，因爲跨距的inline默認display值和表有table默認值。既不尊重overflow財產，所以要創建一個div元素周圍的滾動條，你需要將它們設置爲display:block。使用您上面的例子：

HTML

<table> 
    <tr> 
     <td> 
      <div>...lots of text here...</div> 
     </td> 
    </tr> 
</table>

CSS

table{ 
    height:100px; 
    width:100px; 
    display:block; 
    overflow:scroll; 
}

A和這裏的jsFiddle

來源

2013-02-09 08:56:32 symlink

問題是更新了點，看看 – bjan 2013-02-09 09:32:04

使用overflow-x:scroll在table或td

例如

<table style="width:400px; overflow-x:scroll;"> 
    <tr> 
    <td><div>content</div></td> 
    </tr> 

</table>

來源

2013-02-09 09:14:17 Kits

如果你想在高度滾動以及然後刪除「-x」，把你的風格需要高度。 – Kits 2013-02-09 09:17:29

問題更新後，看看 – bjan 2013-02-09 09:31:20

div繼承寬度和高度和滾動

回答

相關問題