Question

我正在尝试设置一个设计，我想要一个用于导航的左栏和保持固定且不滚动的内容，但旁边有一个内容框可根据需要滚动。我遇到的问题，如果我position: fixed;第一个DIV技术上做了我想要的，但它与第二个DIV重叠。我只是创建它并使用JsFiddle轻松测试，所以我没有这个小提琴以外的实际工作代码。我承认，我现在已经醒了大约30个小时，所以如果这对我来说是一个非常愚蠢的疏忽，请原谅我。谢谢！

FIDDLE

Answer 1

我尝试编写此代码，它也是响应式的。

* {
    padding: 0px;
    margin: 0px;
}
#one {
    float: left;
    position: fixed;
    width: 25%;
    background: #666;
    height: 100%;
}
#two {
    box-sizing: border-box;
    padding: 20px;
    position: absolute;
    left: 25%;
    right: 0%;
    float: right;
    width: 75%;
    background: #333;
}

我希望这会有所帮助。

Answer 2

当您添加position:fixed时，元素将从流中取出，并且它基本上相对于窗口起作用。

所以下面的CSS：

#one {
    float: left;
    position: fixed;
    width: 25%;
    background: #666;
    height: 100%;
}

25％是窗口的25％而不是<div id="wrap">的25％（因此重叠），如果你取消position:fixed，你将看不到重叠。

如果位置固定，您可能希望<div id="two">上有一些左偏移，您可以尝试使用：

margin-left: // DO YOUR MATH.

padding-left: // DO YOUR MATH.

Answer 3

您已超过height: 400px; div，因此请将#one的高度指定为http://jsfiddle.net/ypL8ypsf/5/

#one { 
    position:fixed;
    width:16%;
    background: #666;
    height:384px;
}

希望这会有所帮助

Answer 4

css中的此更改将解决您的问题

#wrap {
background: #999;
width: 500px;
height: 400px;
border: 1px solid black;
padding: 5px;
overflow: scroll;
}
#one {    
position: fixed;
width: 25%;
background: #666;
height: 100%;
display:inline-block;
}
#two {    
width: 70%;
background: #333;
height: 100%;
display:inline-block;
overflow:hidden;
margin-left:29%;
}
.clear {
clear: both;
}

Answer 5

如果你有位置：固定在一个元素上。它只能由浏览器窗口控制，不能由父div控制。因此，如果您添加宽度：25％，它会填满浏览器窗口的25％。不在父母div。

我有2个解决方案，

使用javascript。在'px'中动态添加宽度并添加位置：在
使用位置：绝对。而不是固定的。（实际上你的身高是100％所以你固定的位置并不重要。）

1解决方案：javascript方法[示例代码] ：

//remove position:fixed from #one 
#one {
    float: left;
    width: 25%;
    background: #666;
    height: 100%;
}

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

<script type="text/javascript">
    var calWidth = $("#one").width(); //get the width
    $("#one").css({width:calWidth+'px',position:'fixed'}); //apply to the div
</script>

第二个解决方案：CSS方法[示例代码]

#wrap{
    position:relative;
}
#one{
    position:absolute;
}

Answer 6

尝试使用以下内容覆盖当前的float和position样式。

float: left;和
position: relative;

Answer 7

我没有修复那个DIV，而是将它们浮动到左边并给出第二个DIV溢出-y滚动属性。

希望这可以帮到你：

#wrap {
    background: #999;
    width: 500px;
    height: 400px;
    border: 1px solid black;
    padding: 5px;
}
#one {
    float: left;
    width: 25%;
    background: #666;
    height: 100%;
    overflow:hidden;   

}
#two {
    float: left;
    width: 75%;
    background: #333;
    height: 100%;
    overflow-y: scroll;
}
.clear {
    clear: both;
}

如果它没用，你总是可以尝试使用默认侧栏的框架。

Answer 8

虽然您可以在第二个div中添加一些余量以将其替换为右侧，但我认为您不应该使用fixed来实现此目的。你应该这样做：

<div class="div1">This is not moving</div>
<div class="div2"> Loren ipsum...</div>

html, body{
  height: 100%;
  padding: 0;
  margin: 0;
}
.div1{
  background: #DDD;
  width:40%;
  height: 100%;
  float: left;
  overflow: hidden;
}
.div2{
  background: #EEE;
  width:60%;
  height: 100%;
  float: left;
  overflow-y:auto;
}

这是给你的笔：http://codepen.io/vandervals/pen/bdBWJV

Answer 9

我设法做了你想要的，但增加了更多的div。 HTML将是

<div id="wrap">
<div id="testone"><div id="one"></div></div>
<div id="test"><div id="two">Lorem ipsum...
</div></div>
<div class="clear"></div>

然后

和css

#wrap {
background: #999;
width: 500px;
height: 400px;
border: 1px solid black;
padding: 5px;
overflow: scroll;
}
#testone{
float: left;
width: 25%;
background: #666;
height: 100%;
}
#one {
position: fixed;
}
#test{
float: right;
width: 75%;
height: 100%;
}
#two {
background: #333;
}
.clear {
clear: both;
}

如果一个固定，是否可以将两个DIV并排对齐？

9 个答案: