当前位置: 动力学知识库 > 问答 > 编程问答 >

html - float div next to 100% width div

问题描述:

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.

分享给朋友:
您可能感兴趣的文章:
随机阅读: