How to make a div fill a remaining horizontal spac

2018-12-31 08:52发布

站内问答 / HTML/CSS
1181 23 6

I have 2 divs: one in the left side and one in the right side of my page. The one in the left side has fixed width and I want the one of the right side to fill the remaining space.

    #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #ffffff;
    }
    #navigation {
        width: 780px;
        float: left;  
        background-color: #A53030;
    }
<div id="search">Text</div>
<div id="navigation">Navigation</div>

23条回答
孤独寂梦人
2楼-- · 2018-12-31 09:12

Here is a little fix for accepted solution, which prevents right column from falling under the left column. Replaced width: 100%; with overflow: hidden; a tricky solution, if somebody didn't know it.

<html>

<head>
    <title>This is My Page's Title</title>
    <style type="text/css">
        #left {
            float: left;
            width: 180px;
            background-color: #ff0000;
        }
        #right {
            overflow: hidden;
            background-color: #00FF00;
        }
    </style>
</head>

<body>
    <div>
        <div id="left">
            left
        </div>
        <div id="right">


right
    </div>
</div>

http://jsfiddle.net/MHeqG/2600/

[edit] Also check an example for three column layout: http://jsfiddle.net/MHeqG/3148/

查看更多
0人赞 添加讨论(0) 举报
墨雨无痕
3楼-- · 2018-12-31 09:13

/* * css */

#search {
 position: absolute;
 width: 100px;
}
.right-wrapper {
  display: table;
  width: 100%;
  padding-left:100px;
}
.right-wrapper #navigation {
 display: table-cell;
 background-color: #A53030;
}

/* * html */

<div id="search"></div>
<div class="right-wrapper">
   <div id="navigation"></div>
</div>
查看更多
0人赞 添加讨论(0) 举报
情到深处是孤独
4楼-- · 2018-12-31 09:13

new to css. But I solved this problem by using inline-block. check this out: http://learnlayout.com/inline-block.html

查看更多
0人赞 添加讨论(0) 举报
何处买醉
5楼-- · 2018-12-31 09:15

I tried the above solutions for a liquid left, and a fixed right but non of them worked (I am aware the question is for the reverse but I think this is relevant). Here's what did work:

.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}

.right {float:right; width:150px;}

<div class="wrapper"><div class="left"></div></div>
<div class="right"></div>
查看更多
0人赞 添加讨论(0) 举报
不流泪的眼
6楼-- · 2018-12-31 09:15

I had a similar issue and came up with the following which worked well

CSS:

.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}

HTML:

<div class=top>top </div>
<div>
    <div class="left">left </div>
    <div class="right">
        <div class="content">right </div>
    </div>
</div>

This method won't wrap when the window is shrunk but will auto expand the 'content' area. It will keep a static width for the site menu (left).

And for auto expanding content box and left vertical box(site menu) demo:

https://jsfiddle.net/tidan/332a6qte/

查看更多
0人赞 添加讨论(0) 举报
荒废的爱情
7楼-- · 2018-12-31 09:15

Try adding position relative, remove width and float properties of the right side, then add left and right property with 0 value.

Also, you can add margin left rule with the value is based on the left element's width (+ some pixels if you need space in between) to maintain its position.

This example is working for me:

   #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #FFF;
    }

    #navigation {  
        display: block;  
        position: relative;
        left: 0;
        right: 0;
        margin: 0 0 0 166px;             
        background-color: #A53030;
    }
查看更多
0人赞 添加讨论(0) 举报
上一页 1 2 3 4 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)