CSS two-column layout left fixed to right height adaptive

CSS two bar layout left fixed right height adaptive

Let's look at this HTML+CSS structure:

  . Main{
        width:900px;
        Overflow: Hidden;
        margin:0Auto
        Border:1pxSolid#000;
}
     . Left{
        width:600px;
        float: Left;
        background:#ccb;
}
     . Right{
        float: Left;
        width:300px;
        background:#acf;
}

  <div class="main">
        <div class="Left">
            <p>I am the content</P>
            <p>I am the content</P>
            <p>I am the content</P>
            <p>I am the content</P>
            <p>I am the content</P>
            <p>I am the content</P>
        </div>
        <div class="Right"></div>
    </div>

Condition: Left column right column is fixed width, now left height from content automatically open, ask how to achieve the right height with the left adaptive change.

Can be obtained by the above code

You can see that the right height is not open. Then to achieve the right height adaptive, commonly used in three ways:

• 1 Background Image method:
  First use PS to make a background map, note the background map width and color to and html+css in the left and right column width and color corresponds.

Then add this image to the background of the parent box: to the parent box. Main adds a property:
background: url(bg.jpg) repeat-y;
So the picture is stretched out:

Some famous websites such as Sohu, 12306 and so on have adopted this method.

• 2 margin and padding compensation method:

  Add a large enough value to the right bar code CSS style, and padding-bottom then add the equal negative margin-bottom value so that the right height is open and the right column code is as follows:

     . Right{
      float: Left;
      width:300px;
      background:#acf;
      Padding-bottom:100000em;
      Margin-bottom:-100000em;
  }
  

  This method is still quite simple and convenient, just open the console can see the right column box model has a large padding value, obsessive-compulsive disorder use.
  
  

• 3 Absolute Positioning Method:

  The parent box is set relative positioning, the right column is set to absolute positioning and right:0 the floating property is removed so that the right box can be added to the standard document stream and height:100% its height is synchronized with the parent box.
  The right column code changes to:

    . Right{
        position: absolute;
        Height:100%;
         Right:0;
        width:300px;
        background:#acf;
}

CSS two-column layout left fixed to right height adaptive