1. 首页
  2. 问答
  3. CSS元素和定位

CSS元素和定位

2017-09-27 96 views
-3

我想正确定位一些元素，但他们似乎剪辑/互相干扰，我不知道如何解决这个问题。CSS元素和定位

我想要一个固定位置的标头顶部&底部有一个中心元素，不会与他们剪辑。在中心内部，我想要一个左侧和右侧边栏，它也不会夹在中间。

定位&大小不应该是绝对的。

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

随着我的意思是，如果我改变我的浏览器的宽度。例如内容应“调整”

任何想法或暗示就如何实现这一目标？

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

这是我现在有，页眉页脚&被corretly的位置，但他们交锋与我的其他元素...

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>

来源

2017-09-27 Dinh

+3

你能告诉我们你的html吗？ –

+0

如果你已经在使用'position：fixed'，你为什么要特别想要“定位和大小不应该是绝对的” –

+0

编辑我的文章是更多的指定@WilliamIsted并添加我的HTML – Dinh

回答

0

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

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

来源

2017-09-27 09:46:15

+0

非常感谢。我编辑了左右栏不固定，现在它工作！ 你知道我的问题为什么显示-1吗？我是这个论坛的新手！ – Dinh

+0

是的，可能是因为这种类型的问题已经在stackoverflow的某个地方问过（不完全相同但相关的80％相关） –

0

我想你在skiped你的东西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; 
}

来源

2017-09-27 09:42:39

0

尝试此，

[演示] 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>

来源

2017-09-27 10:01:46

相关问题

 相关问题