Question

我正在尝试在左侧菜单右侧放置一个顶栏。我把我的width: 100% #top_bar放了，但是有这么大的。{1}}。我希望我的顶栏只占用屏幕的剩余空间。

HTML：

<body>    
    <div id="menu_left"></div>
    <div id="top_bar"></div>      
</body>

CSS：

#menu_left {
    background-color: #354052;
    position: fixed;
    height: 100%;
    float: left;
    width: 200px;
}

#top_bar {
    border-bottom: 1px solid #EFF0F3;
    position: absolute;
    background-color: white;
    left: 200px;
    height: 70px;
    width: 100%;
}

结果： enter image description here

Answer 1

brew link --force zlib
brew install php56-memcache

Answer 2

您可以使用左边距为大div

CSS：

#menu_left {
    background-color: #354052;
    position: fixed;
    height: 100%;
    float: left;
    width: 200px;
} 
#top_bar {
    border-bottom: 1px solid #EFF0F3;
    background-color: red;
    margin-left: 200px;
    height: 70px;
}

HTML：

<body>
    <div id="menu_left"></div>
    <div id="top_bar"></div>
</body>

工作Demo

Answer 3

只需将此添加到您的css：

Answer 4

也许this？您只能将width: 100%更改为right: 0。另外float: left也是不必要的。

html, body {
    width: 100%;
    height: 100%;
    margin: 0;    
}

#menu_left {
    background-color: #354052;
    position: fixed;
    height: 100%;
    width: 200px;
}

#top_bar {
    border-bottom: 1px solid #EFF0F3;
    position: absolute;
    background-color: white;
    left: 200px;
    right: 0;
    height: 70px;
}

<div id="menu_left"></div>
<div id="top_bar"></div>

Answer 5

尝试在元素周围使用100％宽度的容器。

<div class="container">

    <div id="menu_left">
    </div>

    <div id="top_bar">
       NAVIGATION
    </div>

</div>

请参阅我刚创建的这支笔：http://codepen.io/anon/pen/MwodLx

div的宽度占用所有剩余宽度

5 个答案: