HTML 扩展大于屏幕尺寸

Question

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

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

滚动条是隐藏的，但你可以在这里测试:http://test.profunda.be/newlayoutr2.html和 fiddle 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

首先，将 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 :正确；
position:absolute；

编辑 fiddle :https://jsfiddle.net/u9buvpL0/6/

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