Question

我的窗口大小为1000px; 我左边有一个div，宽度为700px（固定），右边有一个div，位置固定，初始宽度为300px;

<div id="right" style="position:fixed;max-width:300px; />

https://jsfiddle.net/t2w25xbj/

尝试在此jsfiddle

上调整窗口大小

现在我真正想要的是当我调整浏览器窗口的大小时，右边的div不应该与左边的大小div重叠，而是应该根据右边的空间来改变它的宽度。就像任何内联块元素一样，

他们有什么办法吗？

Answer 1

您应该使用position:static和floats代替固定定位。

这应该有效：

#left {
    position:static;
    float:left;
    width:200px;
    height:100px;
    background:green;
}

#right {
    background:yellow;
    position:static;
    float:right;
    display:inline-block;
    width:calc(100% - 200px);
    min-width:200px;
}

另外，你忘了关闭第二个div。

我认为如果使用bootstrap会更容易。

Answer 2

#left{
  height:150px;
  background:green;
  width:auto;
  margin-right:150px;
}
#right{background:yellow;
  position:fixed;
  height:150px;
  right:0;
  top:0;
  display:inline-block;
  max-width:150px}
}

body,html{
  margin:0px;
  padding:0px;
  }

<div id="left">

</div>
<div id="right" />
This is div with position fixed it, should change its width according to the space left in right size when i resize the window

还要查看https://jsfiddle.net/t2w25xbj/6/

链接

Answer 3

#left{
  width:30%;
  max-width: 700px;
  height:100px;
  background:green;
  float: left;
}
#right{background:yellow;
  position:fixed;
  right:0;
  top:0;
  width: 65%;
  min-width: 300px;
  float: right;
}
.clear{
  clear: both;
}

in html，

将此<div class="clear"></div>添加为右，左div元素

的兄弟

如何更改位置的宽度：固定元素

3 个答案: