CSS: muuta kokoa div automaattisesti säiliön leveyden mukaan

original title: "CSS: Auto resize div to fit container width"


Translate

I have two <div>: left and contents. These two are inside wrapper div that has min-width:960px;. left has fixed width, but I want to make content flexible with min width of 700px and if screen is wider, stick it to the right bound of screen.
screenshot

CSS:

#wrapper
{
    min-width:960px;
    margin-left:auto;
    margin-right:auto;
}
#left
{
    width:200px;
    float:left;
    background-color:antiquewhite;
    margin-left:10px;
}
#content
{
    min-width:700px;
    margin-left:10px;
    width:auto;
    float:left;
    background-color:AppWorkspace;
}

JSFiddle: http://jsfiddle.net/Zvt2j/



minulla on kaksi <div> : vasen ja sisältö. Nämä kaksi ovat kääreosaston sisällä, jonka vähimmäisleveys on 960 kuvapistettä ;. vasemmalla on kiinteä leveys, mutta haluan tehdä sisällöstä joustavaa vähintään ...

Tämä on yhteenveto käännöksen jälkeen. Jos haluat tarkastella koko käännöstä, napsauta käännä-kuvaketta


Kaikki vastaukset
  • Translate

    You can overflow:hidden to your #content. Write like this:

    #content
    {
        min-width:700px;
        margin-left:10px;
        overflow:hidden;
        background-color:AppWorkspace;
    }
    

    Check this http://jsfiddle.net/Zvt2j/1/


  • Translate

    You could use css3 flexible box, it would go like this:

    First your wrapper is wrapping a lot of things so you need a wrapper just for the 2 horizontal floated boxes:

     <div id="hor-box"> 
        <div id="left">
            left
          </div>
        <div id="content">
           content
        </div>
    </div>
    

    And your css3 should be:

    #hor-box{   
      display: -webkit-box;
      display: -moz-box;
      display: box;
    
     -moz-box-orient: horizontal;
     box-orient: horizontal; 
     -webkit-box-orient: horizontal;
    
    }  
    #left   {
          width:200px;
          background-color:antiquewhite;
          margin-left:10px;
    
         -webkit-box-flex: 0;
         -moz-box-flex: 0;
         box-flex: 0;  
    }  
    #content   {
          min-width:700px;
          margin-left:10px;
          background-color:AppWorkspace;
    
         -webkit-box-flex: 1;
         -moz-box-flex: 1;
          box-flex: 1; 
    }
    

  • Translate
    #wrapper
    {
        min-width:960px;
        margin-left:auto;
        margin-right:auto;
        position-relative;
    }
    #left
    {
        width:200px;
        position: absolute;
        background-color:antiquewhite;
        margin-left:10px;
        z-index: 2;
    }
    #content
    {
        padding-left:210px;
        width:100%;
        background-color:AppWorkspace;
        position: relative;
        z-index: 1;
    }
    

    If you need the whitespace on the right of #left, then add a border-right: 10px solid #FFF; to #left and add 10px to the padding-left in #content


  • Translate

    CSS auto-fit container between float:left & float:right divs solved my problem, thanks for your comments.

    #left
    {
        width:200px;
        float:left;
        background-color:antiquewhite;
        margin-left:10px;
    }
    #content
    {
        overflow:hidden;
        margin-left:10px;
        background-color:AppWorkspace;
    }
    

  • Translate

    I have updated your jsfiddle and here is CSS changes you need to do:

    #content
    {
        min-width:700px;
        margin-right: -210px;
        width:100%;
        float:left;
        background-color:AppWorkspace;
    }