css - 一个项目如何使用屏幕全宽减去 60 像素？

Question

这里的例子

我在屏幕左侧有一些导航，所以我将正文宽度设置为 100%。

导航宽度为 60px。额外的 div 我想从屏幕左侧的 60px 到屏幕右侧的末端。

我的问题是它总是以相同的身体宽度加上 60px 并且我在屏幕底部有一个 x-scroll。

//这是在左侧，宽度为 60px

left:0;
position:fixed;
width:60px;
height:100%;

//这是在导航和屏幕右侧之间，但应该占据整个宽度。

background:black;
width:100%;
height:100px;
margin-left:60px;

如何在屏幕左侧显示 60px 宽的内容，然后有一个 div 将其连接到屏幕右侧而不会过度扩展？

Answer 1

看来您需要一个已被广泛记录的固定流体布局。固定部分的宽度应为 60 像素，流体部分应占其余宽度。看看动态驱动器以获得一些灵感。

Answer 2

根据您的需要，您可能希望将其添加到您body的 css:overflow-x:hidden中，这将切断右侧多余的 60px 并防止滚动条出现。但是，div 中的内容也可能会被截断。这实际上取决于您在 div 中放置的内容。

Answer 3

看，我们总是有一种解决方案可table用于这些场景，但我的假设是您不想使用该表。在divs我们的设计中，我们可以将 div 的 display 属性设置为 table 以使其工作。请在此处找到解决方案。

这可以按您的意愿工作，并且也不会将水平滚动带到右侧的主要内容部分。希望这可以帮助。