绝对定位的动态高度
[英]dynamic height with absolute positioning
问题描述
I have a more complex solution which I reduced for sample: 
我有一个更复杂的解决方案，我减少了样本：
<html>
<body>
<div id="top_bar" style="position:fixed;width:100%;background-color:red;">
<div style="position: relative; width:200px;height: 50px;background-color:black;"></div>
</div>
<div id="navigation_bar" style="position:absolute;left:0;top:30px; background-color:orange;width:200px">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
<div id="content" style="position:absolute;left:200px;top:30px; bottom:0;right:0">
<div style="position:absolute;left:0;top:0; bottom:0;right:0;background-color: blue">
</div>
</div>
</body>
</html>
http://plnkr.co/edit/DC51eyvQJVuIlPyiQIr4?p=preview http://plnkr.co/edit/DC51eyvQJVuIlPyiQIr4?p=preview
Basically, I have a top bar, a left bar and some content in html. 基本上，我有一个顶部栏，一个左侧栏和一些html内容。 The problem is top bar height is not fixed (as it is set in my example), and I want the left bar and content to start after end of top bar. 问题是顶部栏的高度不固定（如我的示例中所设置），我希望左侧栏和内容在顶部栏结束后开始。 In sample the content/left bar overlap the top bar which should not happen, those should be one after the other. 在示例中，内容/左栏与顶部栏重叠，这不应发生，它们应该一个接一个。 Any ideas how can I fix this (would prefer minimum code changes)? 有什么主意我该如何解决（最好选择最少的代码更改）？
2 个解决方案
解决方案1
1 2014-11-25 13:30:44
You can easilly achieve this in jquery like so : 您可以像这样在jquery中轻松实现此目的：
$(document).ready(function () {
var height = $("#top_bar").css("height");
$("#navigation_bar").css("top", height);
$("#content").css("top", height);
});
If you don't want to use jquery. 如果您不想使用jquery。 You should not use position absolute to make your layout. 您不应使用绝对位置进行布局。 If you just want a fixed top bar there many other way to achieve this. 如果您只想要一个固定的顶部栏，则有许多其他方法可以实现此目的。
解决方案2
0 2014-11-25 13:38:36
Well, you could always add some pixels to the top -property of the navigation_bar and content divs, in your case 58px instead of 30px. 好吧，您总是可以在navigation_bar和content div的top属性中添加一些像素，在您的情况下为58px而不是30px。 But this method is not really sustainable since you'd have to add the top -property to everything beneath your top_bar . 但是这种方法并不是真正可持续的，因为您必须在top_bar下的所有内容中添加top属性。 A better solution would be to place the navigation_bar and content in a wrapper that has top: 58px and then the content in the wrapper wouldn't need to be styled with position: relative . 更好的解决方案是将navigation_bar和content放置在具有top: 58px的包装器中，然后包装器中的内容无需使用position: relative设置样式。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.