问题描述:

I would like to position a div next to a div with contents of width: 100%. So the markup is:

<div id="left_sidebar" style="float: left; height: 100%; width: 150px;"></div>

<div id="outer_wrapper" style="position: relative; float: left;"></div>

pretty much everything in #outer_wrapper has a width of 100%. Unfortunatly it does not work.

I made a FIDDLE

网友答案:

How about :

#left {
    width: 150px;
    height: 1000px;
    background-color: green;
    float: left;
}
#right {
    width: 100%;
    height: 1000px;
    background-color: red;
    float: left;
}
<div id="right">
  content here
    <div id="left"></div>
  more content here
</div>
网友答案:

http://jsfiddle.net/hasecbinusr/cm9qxbt8/2/

$(document).ready( function() {
   var rightWidth = $(window).width - $('#left').width();
   $('#right').width(rightWidth);
});
网友答案:

How about this?

<div style="padding-left:150px; position:relative;width:100%;">
    <div id="outer_wrapper" style="position: relative; width:100%">this is 100%</div>
    <div id="left_sidebar" style="position:absolute;left:0px;top:0px;width:150px;">this is 150 pixels wide</div>
</div>

The idea is to have the outer-most div a left padding of 150px so that the first child div will be rendered 150px away from the border. Then add another div that will become the left container by using an absolute position and force it to be rendered as if it is the first.

相关阅读:
Top