Question

我已经为我们的水肺潜水俱乐部网站的新布局完成了HTML结构。一位设计师制作了布局，并将其组合在一起。

一切都很合适，除了高度和宽度有问题。我已经重构了它，但没有看到如何解决它。顶部横幅和左图，导航具有固定的宽度。内容文本div应占用剩余的空间，滚动条需要在div中。只需要滚动内容，而不是整个页面。第一个问题是宽度和高度非常大。

滚动条已隐藏，但您可以在此处进行测试：http://test.profunda.be/newlayoutr2.html 和小提琴 https://jsfiddle.net/u9buvpL0/3/

我认为这与某些事情有关：

    .div-main-right-content {
    width: 100%;
    height: 100%;
    float: right;
    position: absolute;
    word-break: normal;
    background-color: white;
    left: 220px;

}

以及包含div具有完整宽度和高度的事实。

Answer 1

问题是在div-main div中有两列，一列宽度固定，另一列宽度百分之一。这会导致您的布局宽度“奇怪”。您可以通过调整固定宽度的div来快速修复它。

垂直滚动问题是由正文中的overflow-y: scroll;引起的：取消它并且它可以正常工作。

我在您的代码中看到了太多position:absolute ...很危险，小心使用它。使用相对定位，更难，但更有用。

Answer 2

首先，没有意义使用float：right和position：absolute。

然后，您100％使用了正确的内容div，它占用了100％的容器宽度。当然，因为左列已经占据了宽度的一部分您可以使用此选项使右列占据所有自由宽度：
添加额外的div main-right-inner 使用这个css：

.div-main-right
{

    margin-left: 330px;
}

.main-right-inner {
  float: right;
  width: 100%;
}

另外在div-main-right-content删除
中 float: right; position: absolute;

编辑小提琴：https://jsfiddle.net/u9buvpL0/6/

额外的包装器.main-right-inner是为了避免清除右列内的浮动元素可能出现的问题。

Answer 3

我看到你的代码，用于

"category[]"

正确对齐

Answer 4

user this code 
.div-main-right-content
{
    width: 60%;
    height: 100%;
    float: right;
    position: absolute;
    word-break: normal;
    background-color: white;
    left: 220px;
}

HTML扩展大于屏幕大小

4 个答案: