Html CSS和DIV，标题和正文，可滚动内容，右边有固定的边栏_Html_Css

Html CSS和DIV，标题和正文，可滚动内容，右边有固定的边栏

html css

Html CSS和DIV，标题和正文，可滚动内容，右边有固定的边栏,html,css,Html,Css,我已经到处找了，但我不能解决这个问题，所以我要转过来我想制作一个如下所示的布局：布局由三个字段组成：顶部具有固定高度、动态宽度和垂直滚动内容的标题标题下方的正文，具有动态宽度和高度，内容可垂直滚动右侧的侧边栏，具有固定宽度、动态高度，并且没有滚动。（滚动正文内容时，此选项应保持不变）动态高度和/或宽度意味着它将随窗口调整大小，而不是随内容调整大小如果有什么不清楚或有任何问题，我会尽力回答编辑：此处是我的一次尝试（非常失败）： html结构： <body> &

我已经到处找了，但我不能解决这个问题，所以我要转过来

我想制作一个如下所示的布局：

布局由三个字段组成：

顶部具有固定高度、动态宽度和垂直滚动内容的标题

标题下方的正文，具有动态宽度和高度，内容可垂直滚动

右侧的侧边栏，具有固定宽度、动态高度，并且没有滚动。（滚动正文内容时，此选项应保持不变）

动态高度和/或宽度意味着它将随窗口调整大小，而不是随内容调整大小

如果有什么不清楚或有任何问题，我会尽力回答

编辑：此处是我的一次尝试（非常失败）：

html结构：

<body>
    <div id="header">
        header content
    </div>
    <div id="content">
        body content
    </div>
    <div id="sidebar">
        sidebar content
    </div>
</body>

编辑：下面的大卫帮我找到了路。基本上，我必须使用calc（）-函数来实现我想要的功能

编辑：下面的Jack提出了一个不使用calc（）的解决方案，我必须说我更喜欢它。非常感谢大家的帮助

将div设置为“overflow”，将滚动条放在需要的地方，并防止滚动条出现在不需要的地方。如果内容太大而无法放入固定宽度区域，您还将使用溢出来指定要对内容执行的操作

就布局而言，如果您使用两列表格，第一行第二列上有rowspan=“2”，第二行只有一列，这就是在公园里散步

如果您不想使用表（没有充分的理由不使用，但如果您这样做，会有成千上万的人看不起您），那么请考虑将div与style=“display:table…”一起使用

再次

感谢你的提琴，你的溢出css正在工作，只是你的标题和内容div是100%宽（全屏），滚动条概念上在侧边栏下。我需要向您介绍如何使用该表布局，以便您可以“动态地”固定尺寸，以便浏览器知道何时滚动而不是无限期地向下扩展内容以适应内容的大小，而不是使用滚动条溢出。

可以通过使用

overflow

属性为每个元素定义的高度和宽度来完成此操作

要使框可滚动（如果内容不适合内部），请执行以下操作：

要使框不可滚动，请执行以下操作：

overflow:hidden;

请注意，如果高度和宽度未定义，元素将增长以适合所有内容。

我在这里做了一个（不是很漂亮，但很实用）示例：

编辑：您可以将侧边栏设置为固定宽度，并使用

calc

相应地调整其他元素：

.sidebar{
    width: 200px;
}

.left{
    width: calc(100% - 200px);
}

已更新以反映这一点。

我创建了一个简单的提琴，它不使用

calc

（支持不是很好，而且使用它可能会/可能不会造成性能损失，这是一个很大的未知因素。）

它非常直接，使用简单的CSS

你。。。想要有人为你创造这个吗？当然；将其添加到此处并编辑问题。这是（我的）一次非常失败的尝试。对不起，我用左边空白代替右边空白。应该更正确。（尽管仍然不起作用）也更新了问题。您必须定义高度。至少在JSFIDLE中，

height:100%

对于父对象来说，实际上什么都不做。它基于父元素。请查看我的答案，了解更多详细信息和您系统的工作原型。是的，我一直在尝试，很抱歉之前没有包括它。我就是不能让它在页面大小和高度方面工作，或者div拒绝正确对齐。。。不过我一定要读那一页，谢谢！另外，我还为这个问题添加了一些更相关的内容。实际上，我正在考虑使用一个表，但它似乎使它的加载速度慢了很多（包含约650个小图像），而且似乎还干扰了对图像的延迟加载。可悲的是，我用我的实验破坏了这个页面，我想看看我是否能让它足够工作，很快在这里发布一个链接。如果我现在不能让它工作，我肯定会再次检查表。非常感谢。你真的在那里。让你的小提琴工作起来不需要太多。看起来真的很好，看看我是否能让整个东西也适合浏览器窗口的高度。很快就会回来。：）啊，一个我似乎无法解决的问题：我希望侧边栏的宽度是固定的（不是百分比），这会弄乱标题的宽度……啊，非常好！现在，如果我能得到整个套件的高度匹配浏览器窗口的高度。。。我还在调查，很快就会回来的。非常感谢你！编辑：没关系，这很简单，可能不应该在凌晨3点做这件事。：）再次感谢您的回答，现在似乎完全按照我的要求工作。真是太好了！我不得不在侧边栏上添加overflow:hidden，否则，如果你将鼠标悬停在侧边栏上，你可以用滚轮向下滚动，看到一个白色的页脚，直到侧边栏的内容消失为止。非常感谢你！关于侧边栏，你完全正确！对不起！在链接到fiddle之前，我正在清理CSS，不小心删除了该属性。谢谢

overflow:hidden;

.sidebar{
    width: 200px;
}

.left{
    width: calc(100% - 200px);
}