Question

容器的右侧用完浏览器并显示滚动条。

如何调整以适应浏览器？并且底部没有到达浏览器的底部......任何想法？

.container {
  border: 1px solid #ffffff;
  margin-top: 60px;
  margin-left: 200px;
  min-width: 100%;
  min-height: 100%;
  position: absolute; 
}

Answer 1

您已将min-width: 100%和margin-left: 200px设置为总计100％+ 200px，最后以水平滚动条结束。

如果你想要边距，并且尺寸是窗口大小的其余部分，你可以这样做：max-width: calc(100% -200px);并保持其余部分相同。

仅适用于相对较新的浏览器。

Answer 2

使用min-width: calc(100% - 202px);包含您在宽度中定义的边距和边框。

对于高度，请确保所有父元素都已定义高度，这也意味着您必须添加body, html: height: 100%;。在这种情况下，还要添加box-sizing: border-box;，但上面的宽度设置应为min-width: calc(100% - 200px);，因为border-box已包含宽度中的边框。

Answer 3

如果您使用宽度为100％的边框，则必须使用 box-sizing：border-box;

position: absolute;
top: 60px;
left:0px;
min-width: 100%;
min-height: 100%;
border: 1px solid #ffffff;
background:red;
box-sizing:border-box;

为什么右侧的浏览器尺寸不足？

3 个答案: