Html CSS元素&；定位

我正试图正确定位一些元素，但它们似乎相互夹住/干扰，我不确定如何解决问题

我想在顶部和底部有一个固定位置的标题，中间有一个不夹在上面的元素。在中心的内部，我想要一个左右侧边栏，它也不会夹在中心

定位和大小不应是绝对的

顶部/底部充当页眉/页脚，只有这些应该是固定的

我的意思是，如果我改变浏览器的宽度，例如，内容应该“调整大小”

关于如何实现这一点，有什么想法或提示吗

|--------------------------------|
|       Top (fixed header)       |
|--------------------------------|
|------|  Center/content  |------|
|------|                  |------|
|------|         ^        |------|
|------|         |        |------|
| Left |   <--stretch-->  | Right|
|------|         |        |------|
|------|         v        |------|
|------|                  |------|
|--------------------------------|
|      Bottom(fixed footer)      |
|--------------------------------|

滴度
测试2

测试2

测试2

测试2

试验

我想你跳过了html文件中的某些内容。你可能应该把你的中提琴放在那里

如果希望固定顶部和底部的滚动条，并使其余的滚动条随滚动条一起移动，则应执行以下操作：

<div class="page">
    <div class="header">
        <p>header</p>
    </div>
    <div class="center">
        <div class="left">
            <p>left</p>
        </div>
        <div class="middle">
            <p>middle</p>
        </div>
        <div class="right">
            <p>right</p>
        </div>
    </div>
    <div class="footer">
        <p>footer</p>
    </div>
</div>

我认为，你的左、右和中间部分应该是内联块：

.left {
    width: 20%;
    /*height: 100;*/
    display: inline-block;
    float: left;
    background: #ccc;
}

.middle {
    width: 60%;
    float: left;
    display: inline-block;
    background: #ddd;
}

.right {
    width: 20%;
    display: inline-block;
    float: right;
    background: #bbb;
}

您可能希望在中心区域的顶部添加一些填充，以便顶部栏不覆盖中心面板：

.center
{
    padding-top: 60px;
}

---

您需要将左右栏的高度设置为屏幕的100%，我在您的代码中没有看到这一点。 第二，因为您对页眉和页脚使用的是固定位置，而不是左栏和右栏，所以div的干扰问题很常见

html，
身体{
身高：100%；
保证金：0自动；
}
身体{
颜色：#fff；
字体系列：Verdana，日内瓦，无衬线；
文本阴影：1px 1px黑色；
}
.第页{
位置：相对位置；
宽度：100%；
身高：100%；
背景：#fff；
}
.标题{
位置：固定；
宽度：100%；
排名：0；
背景：红色；
浮动：左；
}
.页脚{
位置：固定；
浮动：底部；
底部：0；
背景：红色；
宽度：100%；
}
.左{
位置：固定；
宽度：10%；
高度：100vh；
浮动：左；
背景：#ccc；
利润上限：35px；
}
.中{
宽度：60%；
浮动：左；
显示：块；
背景：蓝色；
}
.对{
位置：固定；
宽度：10%；
高度：100vh；
背景:#bbb ;；
右：0px；
}

滴度
测试2

左

测试2

测试2

试验

试试这个

[演示]

代码

<style>
*{
    margin:0;
    padding:0;
}
body{
    text-align:center;
}
.header-wrap{
        height:55px;
        background:gray;
        width:100%;
        position:fixed;
        top:0;
}
.body-wrapper{
    width: 70%;
    margin: 55px auto;
    min-height: 800px;
    background:#eee;
}
.left-panel,.right-panel{
    min-height:557px;
    background: rgba(104, 241, 104, 0.68);
    width:15%;
    position:fixed;
}
.left-panel{
    top:55px;
    left:0;
}
.right-panel{
    top:55px;
    right:0;
}
.footer-wrap{
        height:50px;
        background:gray;
        width:100%;
        position:fixed;
        bottom:0;
}
</style>

*{
保证金：0；
填充：0；
}
身体{
文本对齐：居中；
}
.收割台包装{
高度：55px；
背景：灰色；
宽度：100%；
位置：固定；
排名：0；
}
.车身包装{
宽度：70%；
利润率：55px自动；
最小高度：800px；
背景：#eee；
}
.左面板，.右面板{
最小高度：557px；
背景：rgba（104,241,104,0.68）；
宽度：15%；
位置：固定；
}
.左面板{
顶部：55px；
左：0；
}
.右面板{
顶部：55px；
右：0；
}
.页脚换行{
高度：50px；
背景：灰色；
宽度：100%；
位置：固定；
底部：0；
}

HTML

<div class="page-wrapper">
        <div class="header-wrap">
            <h3><!--Header--></h3>
        </div>
                <div class="left-panel"><h4><!--Left Panel--></h4></div>
                        <div class="body-wrapper">
                            <div class="content-panel"><h1><!--Content--></h1></div>
                        </div>
                <div class="right-panel"><h4><!--Right panel--></h4></div>
        <div class="footer-wrap">
            <h3><!--Footer--></h3>
        </div>
</div>

你能给我们看一下你的html吗？如果你已经在使用

position:fixed

为什么你特别想要“position&Size不应该是绝对的”将我的帖子编辑得更具体@WilliamIsted并添加了我的HTMLI'd checkout这个例子，因为我认为这比尝试使用定位元素的布局更简单-Flexbox是为这种布局风格而设计的小提琴手，它真的接近我想要实现的目标，但我希望浏览器提供的滚动条，滚动时页眉和页脚保持在位置上，只有中间内容移动，所以我使用fixed。非常感谢。我编辑了左栏和右栏，使其不被修复，现在它可以工作了！你知道为什么我的问题是-1吗？我是这个论坛的新手！是的，可能是因为在stackoverflow上的某个地方已经问过此类问题（不完全相同，但相关80%相关）

<div class="page-wrapper">
        <div class="header-wrap">
            <h3><!--Header--></h3>
        </div>
                <div class="left-panel"><h4><!--Left Panel--></h4></div>
                        <div class="body-wrapper">
                            <div class="content-panel"><h1><!--Content--></h1></div>
                        </div>
                <div class="right-panel"><h4><!--Right panel--></h4></div>
        <div class="footer-wrap">
            <h3><!--Footer--></h3>
        </div>
</div>