如何将固定和相对与宽度100%结合起来

Question

我的html/css组合有问题

我在右边有一个固定的菜单，宽度已知：175px。我想要的是用另一个div"填充"这个div左边的空间。

我希望你能理解我的意思，无论如何，提前谢谢！

Answer 1

您可以这样做（它将适用于较旧的浏览器）：

jsFiddle

HTML:

<div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae urna eget purus pharetra sodales. Integer in justo quis risus pellentesque fermentum. Donec sit amet pharetra arcu. Fusce imperdiet tempor eleifend.
</div>
<div class="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae urna eget purus pharetra sodales. Integer in justo quis risus pellentesque fermentum. Donec sit amet pharetra arcu. Fusce imperdiet tempor eleifend.
</div>

CSS:

.left { float:left; height:300px; background:blue; margin-right:175px; }
.right { width:175px; height:300px; background:red; position:fixed; right:0; }

Answer 2

演示此处

CSS

#fixed {
    position:fixed;
    right:0;
    float: right; 
    width: 100px; 
    background: rgba(255,0,0,0.7);
    height:400px;
    text-align: center;
}
#relative {
    position:relative;
    margin-right: 100px;
    background: rgba(0,0,255,0.7);
    height:400px;
    width:100%;
    display: inline-block;
    float:right;
    text-align: center;
}

HTML

<div id="fixed" > 
    I am fixed. 
</div>
<div id="relative"> 
    I am relative, fluid, width 100%     
</div>

Answer 3

根据您需要支持的浏览器（IE9>），您可以在CSS中使用calc()进行"填充"：

.fill {
    width: calc(100% - 175px);
}

calc()仍然被称为"实验技术"，所以在使用之前一定要仔细阅读https://developer.mozilla.org/en-US/docs/Web/CSS/calc

有关calc()支持的更多信息-http://caniuse.com/#search=calc

Answer 4

CSS

.LeftDiv {
    width:80%; 
    display:inline-block;*display:inline;zoom:1; /* The additional code is IE7-fix */
    height:500px;
    background:#aaa;
}
.rightDiv {
    width:175px;
    height:500px;
    display:inline-block;*display:inline;zoom:1;
    background:green;
}

HTML

<leftDiv>a</div><rightDiv>b</div>

最简单的请求版本。