使用滚动条无法使DIV宽度达到100％ [英] Cannot make DIV width 100% with scrollbar
问题描述
我有一个带有DIV和TABLE的页面。 DIV是我的标题，即使在显示水平滚动条时，我也希望它的宽度为100％。由于某些原因，它仅占可视窗口的100％。
我的HTML代码是：
<！DOCTYPE html>< html lang =en>< body> < div style =background-color：yellow;> 100％DIV< / div> < table style =width：100％; background-color：orange;> < THEAD> < TR> < th style =padding-left：20px; padding-right：20px;> Very_Long_Header_1< / th> < th style =padding-left：20px; padding-right：20px;> Very_Long_Header_2< / th> < th style =padding-left：20px; padding-right：20px;> Very_Long_Header_3< / th> < / TR> < / THEAD> < / body>< / html>
p>当我滚动到右侧时，DIV不会使用所有宽度：
如何让DIV占用页面宽度的100％？理想情况下，我不想更改TABLE，因为它是生成的代码。
没有办法修正任何宽度 - 并且使用纯CSS - 无JavaScript）来获取块级元素，以通过块级父元素继承同级块级元素的宽度。
解决方法是在父元素上放置 在您的情况下，不要放置 另外，在wrapper元素上放置 I have a page with a DIV and a TABLE. The DIV is my header and I want it to be 100% width even when horizontal scroll-bar displayed. For some reason it takes only 100% of visible window. My HTML code is:
When I scroll to the right the DIV does not use all the width: How can I make the DIV to take 100% of the page width? Ideally I do not want to change the TABLE because it's a generated code. There is no way (perfectly dynamically--without fixing any widths--and with pure CSS--no JavaScript) to get a block-level element to inherit the width of a sibling block-level element via a block-level parent element. The workaround is to put In your case, don't put
Also, putting 这篇关于使用滚动条无法使DIV宽度达到100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ display：inline-block ，因为内联块会计算其<
$ b display：inline-在。我建议在另一个包装元素中包装 body 元素上块 100％div 和表元素，因此：
<！DOCTYPE html>< html lang =en>< body> < div class =wrapperstyle =display：inline-block; min-width：100％;> < div style =background-color：yellow;> 100％DIV< / div> < table style =width：100％; background-color：orange;> < THEAD> < TR> < th style =padding-left：20px; padding-right：20px;> Very_Long_Header_1< / th> < th style =padding-left：20px; padding-right：20px;> Very_Long_Header_2< / th> < th style =padding-left：20px; padding-right：20px;> Very_Long_Header_3< / th> < / TR> < / THEAD> < /表> < / div>< / html> min-width：100％会使它与 display：block 在较大的屏幕尺寸上。<!DOCTYPE html>
<html lang="en">
<body>
<div style="background-color:yellow;">100% DIV</div>
<table style="width:100%; background-color:orange;">
<thead>
<tr>
<th style="padding-left:20px; padding-right:20px;">Very_Long_Header_1</th>
<th style="padding-left:20px; padding-right:20px;">Very_Long_Header_2</th>
<th style="padding-left:20px; padding-right:20px;">Very_Long_Header_3</th>
</tr>
</thead>
</table>
</body>
</html>display: inline-block on the parent element, since an inline-block calculates its width property from its widest child.display: inline-block on the body element. I would suggest wrapping your 100% div and table elements in another wrapper element, thus:<!DOCTYPE html>
<html lang="en">
<body>
<div class="wrapper" style="display: inline-block; min-width: 100%;">
<div style="background-color:yellow;">100% DIV</div>
<table style="width:100%; background-color:orange;">
<thead>
<tr>
<th style="padding-left:20px; padding-right:20px;">Very_Long_Header_1</th>
<th style="padding-left:20px; padding-right:20px;">Very_Long_Header_2</th>
<th style="padding-left:20px; padding-right:20px;">Very_Long_Header_3</th>
</tr>
</thead>
</table>
</div>
</body>
</html>min-width: 100% on the wrapper element will make it mimic an element with display: block on larger screen sizes.
