开发者

Fixed for CSS Margin Collapsing

开发者 https://www.devze.com 2023-02-17 01:50 出处：网络

Assuming I have HTML like <body id=\"doc\"> <div id=\"container\"> ddd </div> </body>

相关专题：css

Assuming I have HTML like

<body id="doc"> 

  <div id="container">
    ddd
  </div>

</body>

And my CSS is

#doc {
    margin-top:0;
    width: 480px; 
    height: 320px;
开发者_运维知识库    background-color: red;   
    overflow:auto;
}

#container {
    text-align: center;
    width: 400px;
    background-color: green;
    margin: 10px; 
}

It seems by using the overflow:auto does not help, any idea?

Force the lower level to stretch down to the last element by doing a clear:

<style>
    #doc {
        margin-top:0;
        width: 480px; 
        height: 320px;
        background-color: red;   
        overflow:auto;
    }

    #container {
        text-align: center;
        width: 400px;
        background-color: green;
        margin: 10px; 
    }


    #stretchmyparent {
      clear:both;
    }
    </style>

    <body id="doc"> 
      <div id="container">
        ddd
      </div>

      <div id='stretchmyparent'></div>
    </body>