Question

我正在尝试正确定位一些元素，但它们似乎相互影响/干扰，我不知道如何解决这个问题。

我想在顶部和顶部安装一个固定的标题。底部有一个中心元素，不会与它们夹在一起。在中心的内部，我想要一个左右侧边栏，它也不会与中心夹在一起。

定位＆amp;大小不应该是绝对的。

顶部/底部仅作为页眉/页脚，这些应该是固定的。

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

有关如何实现这一目标的任何想法或暗示？

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

这就是我现在所拥有的，标题＆amp;页脚正确定位，但它们与我的其他元素发生冲突......

html,
body {
  height: 100%;
  margin: 0 auto;
}

body {
  color: #fff;
  font-family: Verdana, Geneva, sans-serif;
  text-shadow: 1px 1px black;
}

.page {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
}

.header {
  position: fixed;
  width: 100%;
  top: 0;
  background: #ddd;
}

.footer {
  position: fixed;
  float: bottom;
  bottom: 0;
  background: #aaa;
}

.left {
  width: 20%;
  height: 100;
  float: left;
  background: #ccc;
}

.middle {
  width: 60%;
  float: left;
  display: block;
  background: #ddd;
}

.right {
  width: 20%;
  float: right;
  background: #bbb;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="css/style.css">
  <title>Titel</title>
</head>

<body>
  <div class="page">
    <div class="header">
      <p>test2</p>
    </div>
    <div class="center">
      <div class="left">
        <p>test2</p>
      </div>
      <p>test2</p>
      <div class="right">
        <p>test2</p>
      </div>
    </div>
    <div class="footer">
      <p>test</p>
    </div>
    </page>
</body>

</html>

Answer 1

我认为你在html文件中有所收获。你可能应该把你的中间div放在那里。

如果您希望修复顶部和底部条形以及使用滚动条移动其余部分，则应执行以下操作：

<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>

我为顶部和底部面板添加了边框，以便您可以看到它们覆盖的区域以及它们背后的内容。

.header {
    position: fixed;
    width: 100%;
    top: 0;
    /*background: #ddd;*/
    border: 1px dashed #000;
}

.footer {
    position: fixed;
    width: 100%;
    /*float: bottom;*/
    bottom: 0;
    /*background: #aaa;*/
    border: 1px dashed #000;
}

你的左，右和中间部分应该是内联块，我相信：

.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;
}

Answer 2

您需要将左右栏的高度设置为屏幕的100％，我的代码中没有看到这一点。其次，因为您使用固定位置作为页眉和页脚，但不是左右栏，因此div的干扰问题很常见。

＆＃13;

html,
body {
  height: 100%;
  margin: 0 auto;
}

body {
  color: #fff;
  font-family: Verdana, Geneva, sans-serif;
  text-shadow: 1px 1px black;
}

.page {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
}

.header {
  position: fixed;
  width: 100%;
  top: 0;
  background: Red;
    float: left;
}

.footer {
  position: fixed;
  float: bottom;
  bottom: 0;
  background: Red;
    width: 100%;
}

.left {
  position: fixed;
  width: 10%;
  height: 100vh;
  float: left;
  background: #ccc;
    margin-top: 35px;
}

.middle {
  width: 60%;
  float: left;
  display: block;
  background: Blue;
}

.right {
    position: fixed;
  width: 10%;
    height: 100vh;
  background: #bbb;
    right: 0px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="css/style.css">
  <title>Titel</title>
    
<style type="text/css">
    
    </style>
</head>

<body>
  <div class="page">
    <div class="header">
      <p>test2</p>
      </div>
    <div class="center">
      <div class="left">
        <p>Left</p>
      </div>
      <p>test2</p>
      <div class="right">
        <p>test2</p>
      </div>
    </div>
    <div class="footer">
      <p>test</p>
      </div>
    </div>
    </body></html>

＆＃13;

Answer 3

试试这个，

[演示] https://jsfiddle.net/RRakeshraj/dk4mezgb/1/

<强> CODE

<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>

<强> 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>

CSS元素＆amp;定位

3 个答案: