1

我在左侧有一个垂直固定的 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>

小提琴

我一直在尝试围绕两个 div 进行包装，但仍然遇到问题。任何帮助将非常感激。

4

4 回答 4

1

是否有充分的理由拥有所有这三个：

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

这似乎不是特别敏感，它仅变化 90 像素。如果您可以将左侧栏设置为固定宽度，例如 245 像素，那么您可以添加

margin-left:245px;

到右边栏。

于 2014-06-25T19:38:50.973 回答
1

你不能只设置 width: 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;
}
于 2014-06-25T19:34:45.757 回答
0

我想到了。我将最小/最大流体 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 -->

于 2014-06-25T22:32:29.663 回答
0

如果您希望 #mainContent 填充页面的其余部分，您可能需要 javascript。重叠是由 position:fixed 样式引起的。在这种情况下，我认为您不需要 float:left 。

无论如何，如果你想保持位置：固定，最小/最大宽度和#mainContent的自动填充宽度，那么你可能应该使用一些javascript（jQuery会做）并计算初始化和调整#leftBanner宽度和remaing窗口这样您就可以为您的#mainContent div 提供正确的宽度和左边距/左边距或左边距（位置：绝对）。

为了清楚起见，我并不是说没有更简单的解决方案，我只是没有找到。

于 2014-06-25T19:33:13.620 回答