CSS继承不继承
基本上，这是我的问题。容器 thisone 没有正确继承渲染区域的高度。它只是保持不变，这真的很令人烦恼。 Renderzone 将随着用户内容动态增长，我希望有一个用于章节列表内容的列，这样它最终不会包装内容。
JSFiddle 版本 - http://jsfiddle.net/K2NPz/1/
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="hidden"
style="visibility: visible; height: auto; ">
<div style="height: auto;">
<div id="renderzone"
style="background-color: #bbe4e0; padding: 5px;">
<div style=" min-height: 175px;height: inherit;float: left;overflow: auto;height: 100%;">
<div id="chapterlist"
style="float: left; width: auto; height: auto; display: inline-block; border: 1px; border-style: solid; border-radius: 10px 0px 10px 0px; min-height: 140px; min-width: 150px; margin-right: 10px; margin-top: 10px; margin-left: 10px; padding: 10px; background-color: #B9D9F1;">
<a href="#render1"
style="display: inline-block; padding-top: 8px; padding-bottom: 8px; color: #346460; font-size: 130%;"
id="anchor1">Header 1</a><br>
</div>
<img src="blank.jpg" alt="White Pixel">
</div>
<div style="background-color: white; border-radius: 10px; margin: 10px; padding: 5px; margin-right: 20px; box-shadow: 10px 10px 5px #888;">
<h1 id="render1"
name="render1"
class="renderh1">Header 1<br></h1>
<p id="render2"
name="render2"
class="renderp">Long text here...<br>
</p>
<img id="render3"
name="render3"
class="renderimg"
alt="Blank Pixel"
src=""
style="max-width: 400px;"><br>
<a href="#top">To Top</a>
</div>
</div>
</div>
<input type="button" value="??" id="sender">
<input type="button" value="??" id="modoru">
</div>
</body>
</html>
Basically, here's my issue. The container thisone is not inheriting the height of renderzone properly. It just stays the same and it's really aggravating. Renderzone will grow dynamically with user content, and I'd like there to be a column for the chapter-list-thing so it doesn't end up wrapping the content.
JSFiddle version - http://jsfiddle.net/K2NPz/1/
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="hidden"
style="visibility: visible; height: auto; ">
<div style="height: auto;">
<div id="renderzone"
style="background-color: #bbe4e0; padding: 5px;">
<div style=" min-height: 175px;height: inherit;float: left;overflow: auto;height: 100%;">
<div id="chapterlist"
style="float: left; width: auto; height: auto; display: inline-block; border: 1px; border-style: solid; border-radius: 10px 0px 10px 0px; min-height: 140px; min-width: 150px; margin-right: 10px; margin-top: 10px; margin-left: 10px; padding: 10px; background-color: #B9D9F1;">
<a href="#render1"
style="display: inline-block; padding-top: 8px; padding-bottom: 8px; color: #346460; font-size: 130%;"
id="anchor1">Header 1</a><br>
</div>
<img src="blank.jpg" alt="White Pixel">
</div>
<div style="background-color: white; border-radius: 10px; margin: 10px; padding: 5px; margin-right: 20px; box-shadow: 10px 10px 5px #888;">
<h1 id="render1"
name="render1"
class="renderh1">Header 1<br></h1>
<p id="render2"
name="render2"
class="renderp">Long text here...<br>
</p>
<img id="render3"
name="render3"
class="renderimg"
alt="Blank Pixel"
src=""
style="max-width: 400px;"><br>
<a href="#top">To Top</a>
</div>
</div>
</div>
<input type="button" value="??" id="sender">
<input type="button" value="??" id="modoru">
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
尝试将样式设置为
overflow:auto。因为你正在浮动它，所以它超出了范围。将其置于溢出状态会将其返回到作用域中。Try setting your style to
overflow:auto. Because you are floating it, it gets out of the scope. Placing it with overflow will return it in the scope.浮动元素存在继承高度的问题，因为它们不知道中心内容的高度。
最糟糕的方法：通过插入 div 清除最后一个子元素后面的浮动元素（您也可以使用 span 代替 div
< /代码>）。更好的方法： - 父 div 的
overflow:hidden。如果你使用浮动子元素，你需要清除他的父div。它将使边距正常工作并且不会生成混乱的 html 元素。
Floated elements have problems with inherit heights, because they don't know the height of the centre content.
The worst method : clear the floaters after the last child element by insert div (you can use also span instead of div
<span class="clear"></span>).Better way: -
overflow: hiddenfor the parent div.If you use floats child elements you need to clear his parent div. It will make the margins work proper and don't generate the messy html elements.