Question

我正在尝试设置一个看起来像this图片的网页。

有一个120px宽的侧边栏，100％高度和75px高的页脚，宽度为100％。我希望根据窗口大小调整主div（白色部分）的大小，并填充侧边栏和页脚未占用的空间，但不要同时与它们重叠。我尝试用百分点设置主div的高度和宽度，但它仍然与其他div重叠。有什么建议吗？

Here's指向代码的链接。我已经将'main'div的颜色更改为黑色，但由于未指定尺寸，因此它现在不会显示。

这是CSS部分：

#main
{
    background-color: black;
    position: absolute;
    left: 120px;
    bottom: 75px;
}

#footer
{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 75px;
    background-color: yellow;
}

#sidebar
{
    position: absolute;
    width: 120px;
    height: 100%;
    background-color: #ff7a0f;
    left: 0px;
    top: 0px;
}

提前感谢您的帮助！

Answer 1

在CSS中，考虑到侧边栏位于左侧，而主要div的ID为“main”：

  #main { 
  position: absolute; 
  left: 120px;
  bottom: 75px;
  }

如何设置可调整大小的div与设置大小的div不重叠？

1 个答案: