位置：固定在 div 内，在 CSS 布局中没有采用适当的宽度

Question

我正在尝试为我的网站创建一个两列布局，其中包含在其中一列中固定的div 。 下面是概述、图像和我的代码。 对此的任何帮助将不胜感激。

概述：

• 我有两个高度都是 100% 的元素。 .user-nav导航元素和.container div 元素。
• .user-nav元素具有固定定位， width为 75px， height为 100%。 .container div有 100% 的width ，100% 的height和 -75px margin-left （考虑到.user-nav width ）。
• 在.container div内部，还有两个div元素： .viewport div和.right_panel div 。 （仅供参考：我将.container元素包裹在这两个div周围，​​因为.container div所有内容都是使用 jQuery/Ajax 动态加载的。）
• .right_panel div是固定定位的，宽度为 30%，高度为 100%。
• .viewport div的宽度为 70%。 .viewport div包含另外 3 个div ，即.header div 、 .content div和.footer div 。 所有这三个div都应该是.viewport div 100%。
• 无论是.header和.footer div的内线的.viewport div是固定的，具有height的50像素。 .header div有一个top: 0px应用（粘在顶部）和.footer div有一个bottom: 0px属性（粘在底部）。
• .content div及其内容应该是页面上唯一滚动的内容。

问题：

.viewport div似乎运行时间超过 70% 并位于.right_panel div之下。 我知道一旦你给出一个div position: fixed ，它的父级就变成了主体。 我相信这就是问题所在。

如何将fixed position div放在另一个div ？ 创建这样的布局还有其他选择吗？ 我应该采取什么其他方法？ 任何的意见都将会有帮助。

JSFiddle：** http://jsfiddle.net/mikerodriguez/709rcw8a/1/

布局图：

CSS

html{height: 100%;}
body{
    margin: 0px;
    height: 100%
}
.user-nav{
    width: 75px;
    height: 100%;
    position: fixed;
    background: #000;
    z-index: 1000;
}
.container{
    width: 100%;
    height: 100%;
    margin-left: 75px;
}
.viewport{
    width: 70%;
    background: #eee;
}
.header{
    height: 50px;
    background: #CCC;
    position:fixed;
    width: 70%;
}
.content{
    padding-top: 50px;
}
.content p{
    margin: 0px 0px 50px 0px;
}
.footer{
    height: 50px;
    position: fixed;
    background: #CCC;
    bottom: 0px;
    width: 70%;
}
.right_panel{
    position: fixed;
    top: 0px;
    right: 0px;
    width: 30%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    color:#FFF;
}

HTML

<nav class="user-nav"></nav>

<div class="container">
    
    <div class="viewport">
        
        <div class="header">Header</div><!-- end .header -->
        
        <div class="content">
            LOTS OF CONTENT
        </div><!-- end .content -->
        
        <div class="footer">Footer</div><!-- end .footer -->
        
    </div><!-- end .viewport -->
    
    <div class="right_panel">fixed right panel</div><!-- end .right_panel -->
    
</div><!-- end .container -->

同样，对此的任何帮助将不胜感激。 谢谢。

Answer 1

问题：

您正在混合百分比和固定宽度。 .right_panel重叠的原因是因为你的总百分比超过 100%：

30% + 70% = 100% + 75px;

您需要为.user-nav使用一个百分比，如此小提琴所示：

修复 1：仅百分比

html{height: 100%;}
body{
    margin: 0px;
    height: 100%
}
.user-nav{
    width: 10%;
    height: 100%;
    position: fixed;
    background: #000;
    z-index: 1000;
}
.container{
    width: 100%;
    height: 100%;
    margin-left: 10%;
}
.viewport{
    width: 60%;
    background: #eee;
}
.header{
    height: 50px;
    background: #CCC;
    position:fixed;
    width: 60%;
}
.content{
    padding-top: 50px;
}
.content p{
    margin: 0px 0px 50px 0px;
}
.footer{
    height: 50px;
    position: fixed;
    background: #CCC;
    bottom: 0px;
    width: 60%;
}
.right_panel{
    position: fixed;
    top: 0px;
    right: 0px;
    width: 30%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    color:#FFF;
}

修复 2：计算

根据您的浏览器兼容性，您可以使用calc代替：

width: calc(70% - 75px);

这将从 70% 的宽度中删除 75px。

示例 3：仅职位

在上面的示例中，页面仅使用可以混合百分比和固定宽度的位置，但隐式设置每个定位元素的左右和顶部和底部值：

html{height: 100%;}
body{
    margin: 0;
    height: 100%
}
.user-nav{
    width: 75px;
    height: 100%;
    position: fixed;
    background: #000;
    z-index: 1000;
}
.viewport{
    background: #eee;
}
.header{
    height: 50px;
    background: #CCC;
    position:fixed;
    left: 75px;
    right: 30%;
    z-index: 1;
}
.content {
    position: absolute;
    top: 50px;
    left: 75px;
    right: 30%;
    bottom: 50px;
}
.footer{
    height: 50px;
    position: fixed;
    background: #CCC;
    bottom: 0px;
    left: 75px;
    right: 30%;
    z-index: 1;
}
.right_panel{
    position: fixed;
    top: 0;
    right: 0;
    width: 30%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    color:#FFF;
}

Answer 2

您可以尝试对所有列使用百分比加起来为 100%，但如果您想要一个具有两个百分比的固定宽度列，您需要 70% 列位于固定宽度左列下方。 调整填充并在布局元素上使用box-sizing: border-box以防止这增加元素的总宽度。

请参阅此处的示例： http : //jsfiddle.net/709rcw8a/4/

Answer 3

尝试这个

.container {
  width: calc(100% - 75px);
  height: 100%;
  margin-left: 75px;
}