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

我正在尝试设置一个设计，其中我希望左侧的导航栏和东西保持固定，不滚动，但旁边有一个内容框，可以根据需要滚动。我遇到的问题，如果我

位置：已修复第一个DIV从技术上讲它满足了我的要求，但它与第二个DIV重叠。我只是创建了这个DIV，并使用JSFIDLE轻松地进行测试，因此除了这个FIDLE之外，我没有其他实际的工作代码。我承认，我已经醒了大约30个小时了，所以如果这真是我愚蠢的疏忽，请原谅我。谢谢

尝试用以下内容覆盖当前的
浮动
和
位置
样式：

float：左和

位置：相对
我没有修复该DIV，而是将它们都向左浮动，并给出第二个DIV overflow-y scroll属性

希望这能帮助您：

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

如果它没有用，你总是可以尝试一些带有默认边栏的框架。
虽然你可以在第二个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;
}

这没有移动
洛伦·伊普苏姆。。。
html，正文{
身高：100%；
填充：0；
保证金：0；
}
.1分部{
背景：DDD；
宽度：40%；
身高：100%；
浮动：左；
溢出：隐藏；
}
.第2分部{
背景：#EEE；
宽度：60%；
身高：100%；
浮动：左；
溢出y：自动；
}

这是给你的一支笔：
我设法做了你想做的事，但添加了更多的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>

添加
position:fixed
时，元素将从流中取出，其基本功能与窗口有关

因此，以下CSS：

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

25%是窗口的25%，而不是
的25%（因此重叠），如果您取下
位置：fixed
，您将看不到重叠

在位置固定的情况下，您可能希望在
上有一些左偏移，您可以使用以下方法进行校准试验：

margin-left: // DO YOUR MATH.

padding-left: // DO YOUR MATH.

你已经有了高度：400px
在上方的
div
上，因此也要指定
#one
的高度

希望这将有助于解决您的问题

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

我试着写这段代码，它也是有响应的

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

我希望这会有所帮助。
如果您在元素上有位置：固定。它只能由浏览器窗口控制，不能由父div控制。因此，如果添加宽度：25%，它将占浏览器窗口的25%。不在父分区中

我有两个解决方案

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

从1和2中移除浮动，并添加
左边距：150px到2。这是另一种方式。Like
position:fixed
相对于窗口，而不是父元素。@protocaolzero，我的解决方案，是您需要的解决方案；）问我你有什么困难！哇，谢谢大家的帮助！我晚上休息得很好，意识到我的整个问题都是因为我在宽度上使用了一个百分比。现在，我决定为两列使用一个设置的宽度，这完全解决了我的问题。我仔细阅读并尝试了给出的每一个答案，我会选择一个最合适的答案。这是我对这个问题的最好回答，我承认我的回答很糟糕。非常感谢。非常感谢。我在那里设置高度的原因是为了模拟浏览器窗口，实际的实时版本不会设置该高度。不过，谢谢你们，从技术上讲，这是对我措词不当的问题的正确回答，但朱加尔·潘查的回答最适合我的解决方案。再次感谢你！这几乎奏效了！问题是（我知道我没有正确地解释这一点）我需要第一列的背景保持不变，因为它将覆盖一个图像，并且是透明的。谢谢你，我真的很感激！你的回答给我留下了最深刻的印象！仅仅是你对javascript的理解就很好！我确实尝试过你的解决方案，它们都很管用，但是javascript对于我的实际问题来说似乎有点矫枉过正。谢谢你，我真的很感激！这个解决方案几乎奏效了，但问题是我对我的问题做出了可怕的解释。我在小提琴中设置的包装盒只是为了模拟一个浏览器窗口，而不是保持这种方式。我知道你不知道，我为我拙劣的解释道歉。谢谢你！这实际上并没有解决问题。它留下了重叠部分。然而，您确实提供了一种替代使用我不知道的浮动的方法！谢谢你！你完全正确！如果我措辞正确的话，那就解决了这个问题。我可以使用您的边距和填充解决方案，或者只是将我的列缩小一个百分比，以弥补重叠。感谢您如此详细地解释了您的解决方案，您确实帮助了我！：）这个解决方案实际上并没有解决问题，但我知道你要去哪里。我并不是真的打算把我的两列放在这样一个包装器中，那个包装器只是用来模拟一个浏览器窗口。谢谢你，谢谢你的回答！我需要第一列保持固定，而不是滚动，所以这实际上并没有解决我的问题。谢谢你！
* {
    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;
}

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

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