Question

我的html / css构成存在问题

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

我希望你能理解我在说什么，无论如何，提前谢谢！

Answer 1

您可以执行以下操作（适用于旧浏览器）：

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

根据您需要支持的浏览器（IE9＆gt;），您可以在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 3

<强> DEMO HERE

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

您请求的最简单版本。

如何结合固定和放大相对宽度100％

4 个答案: