相对 div 中的绝对定位 div 不想扩展更多内容

Question

我有我的#contentdiv、#box_left和#box_right。父div相对定位，但两个内部div都是绝对定位的。问题是，当里面有更多内容时，#box_right不想延长它的高度。我还想让这些内部div成为静态的，并浮动以并排设置它们，但即使我已经设置清楚了，内容也会随之消失：两者都在#footerdiv。另一个小问题：你们知道当页面按屏幕分辨率缩放时，为什么菜单链接会拉伸，最后一个链接会转到第二行吗？

这是我的网站链接：点击这里

非常感谢您的帮助！Thnx提前

Answer 1

如果不会扩展的框的内容是浮动的，则需要在它们之后添加一个div：

<div id="content">
    <div id="box_right" style="margin-left:200px;"></div>
    <div id="box_left" style="float: left; width: 200px;"></div>
    <div style="clear:both;"></div>
</div>

Answer 2

在#box_right和#content上去掉你的"身高：100%"-它们对你没有帮助。

相反，将#contentdiv的最小高度设置为略大于#box_rightdiv，您应该会大笑起来。在去除100%的高度后，我将#content的最小高度设置为1000px（所有这些都使用Chrome中的检查器），它就能正确渲染。

我还快速查看了您的javascript——您应该将所有jQuery选择器存储为变量，而不是重新查询它们——这将更快。所以你的document.ready处理程序应该写得更像这样：

$(function () {
    var $content = $("#content");
    var $footer = $("#footer");
    $content.hide();
    // etc
    $("a", $footer).click(function () {
        $footer.animate({ marginTop: "none" }, 1000);
        // etc
    });
    // etc
});

希望能有所帮助。

Answer 3

就我个人而言，我正在尝试对一些"主对象"使用绝对定位。在布局行的第一个div上使用"clear:bboth；position:relative；float:left；"，使其余部分从左到右对齐。在子元素上使用"display:block；"可以将对象尺寸"调整"到其中的内容。

关于对象定位的不错教程：div框

Answer 4

使用基于浮点的布局除非你有充分的理由使用绝对值，否则你只会造成自己的问题。

更新：从文档流中取出一个绝对定位的元素。清除无效。Clear只影响浮动元素，这可能是您应该使用的。或者，看看flexbox，它很棒，但也有自己的复杂性。

通过flexbox 解决