Question

我左边有一个垂直固定div，最小/最大宽度设置为100％高度。我似乎无法填补剩余空间而不重叠。任何解决方案？

CSS

body {
    margin: 0;
    padding: 0;
    height: 100%;
}

#leftBanner {
    height: 100%;
    background-color: #CCC;
    width: 22%;
    position: fixed;
    text-align: center;
    min-width: 245px;
    max-width: 355px;
    float:left;
}

#mainContent {
    width: auto;
    height: 2000px;
    background-color: red;
    opacity: .3;
}

HTML

<div id="leftBanner"></div>

<div id="mainContent">asdf</div>

Fiddle

我一直在尝试围绕两个div的包装但仍然遇到麻烦。任何帮助都会非常感激。

Answer 1

你不能只设置宽度：auto;并让它填充剩余的空间，因为该元素与另一个div没有关系。

此问题的一个解决方案是使用网格布局。你有一个宽度为100％的容器;然后是孩子的百分比。

JSFiddle

HTML

<div class="container">
    <div class="column one">one tenth</div>
    <div class="column nine">nine tenth</div>
</div>

CSS

.one{
    width: 10%;
    background-color: red;
}
.nine{
    width: 90%;
    background-color: grey;
}
.column{
    height: 100px;
    float:left;
    position: relative;
}

Answer 2

有充分的理由拥有这三个：

width: 22%;
min-width: 245px;
max-width: 355px;

这似乎并不特别敏感，只有90px。如果你可以让你的左栏有一个固定的宽度，比如245px，那么你可以添加

margin-left:245px;

到右边的栏。

Answer 3

如果你希望#mainContent让页面的其余部分填满，你可能需要javascript。重叠是由位置：固定样式引起的。我不认为你需要漂浮：在这种情况下离开。

无论如何，如果你想保持位置：固定，最小/最大宽度和#mainContent的自动填充宽度，那么你可能应该使用一些javascript（jQuery会做）并在初始化时计算并调整大小#leftBanner宽度和剩余窗口，以便您可以为#mainContent div提供正确的宽度和margin-left / padding-left或左边（使用position：absolute）。

要明确我并不是说没有更简单的解决方案，我只是找不到。

Answer 4

我明白了。我将最小/最大流体div放在内容div中，并用相同尺寸的固定div覆盖它。感谢您的快速回复。这是小提琴。

http://jsfiddle.net/T52Ms/

（下面的代码都在小提琴中。）

CSS

html, body {
  margin: 0;
  padding: 0;
  border: 0;
  height: 100%;
}
#container{
width:100%;

}
#leftBanner {
height: 100%;
background-color: #CCC;
width: 22%;
min-width: 245px;
max-width: 355px;
float:left;
}
#fixedBanner {
height: 100%;
background-color: blue;
width: 22%;
min-width: 245px;
max-width: 355px;
float:left;
z-index: 9999;
position: fixed;
}
#mainContent {
height: 2000px;
opacity: .3;
float:right;
width: 100%;
}

HTML

<div id="container">


<div id="fixedBanner">Main Banner</div>


<div id="mainContent">  



<div id="leftBanner">asdf</div> <!-- end leftBanner -->



asdf</div><!-- end mainContent -->

尝试用流体尺寸填充垂直固定div旁边的剩余空间

4 个答案: