Question

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

概述

我有两个100％高度的元素。 .user-nav nav元素和.container div元素。
.user-nav元素具有固定定位，宽度为75px，高度为100％。 .container div具有100％的宽度，100％的高度和-75px的margin-left（以考虑.user-nav宽度）。
在.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％。
.viewport div中的.header和.footer div都是固定的，高度为50px。 .header div有一个顶部：0px应用（坚持到顶部）而.footer div有一个底部：0px（坚持到底部）。
.content div及其内容应该是在页面上滚动的唯一内容

问题：

.viewport div似乎运行时间超过70％，并且在.right_panel div下。我知道，一旦你给出了一个div位置：固定，它的父母就会成为身体。我相信这就是问题所在。如何将固定位置div放在另一个div中？在创建这样的布局时还有其他选择吗？我应该采取什么其他方法？任何建议都会有所帮助。

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

布局图片 enter image description here

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的百分比，如此小提琴所示：

Fix 1: Percentage Only

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

Fix 2: Calc

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

width: calc(70% - 75px);

这将从70％的宽度中移除75px。

Example 3: Positions Only

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

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

position：固定在一个div中，在CSS布局中没有采用适当的宽度

3 个答案:

问题：

Fix 1: Percentage Only

Fix 2: Calc

Example 3: Positions Only