首页 > html > column > CSS Layout - 如何用单列创建液体布局

CSS Layout - 如何用单列创建液体布局

column 【column】
我们想知道如何用单列创建液体布局。
代码展示 运行结果 

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
html, body {
  margin: 0;
  padding: 0;
  border: 0;
  height: 100%;
  min-height: 100%;
}

* html body { /*IE6 hack*/
  padding: 30px 0;
}

* html #content { /*IE6 hack*/
  height: 100%;
  width: 100%;
}

#wrapper {
  margin: 30px 0;
  width: 100%;
  min-width: 800px;
  height: 100%;
  min-height: 100%;
}

#header, #footer {
  position: fixed;
  left: 0;
  width: 100%;
  height: 30px;
  background-color: gray;
  color: white;
}

#header {
  top: 0;
}

#footer {
  bottom: 0;
}

#content {
  height: 100%;
  min-height: 100%;
  background: rgba(0, 0, 0, .2);
}
</style>
</head>
<body>
  <div id="wrapper">
    <div id="header">This is header</div>
    <div id="footer">This is footer</div>
    <div id="content">
      <div class="expand">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi
        commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
        pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id
        velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed
        quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere
        sapien. Nam consectetuer. Sed aliquam, nunc eget euismod
        ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim
        nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae
        nulla consequat libero cursus venenatis. Nam magna enim, accumsan
        eu, blandit sed, blandit a, eros.<br />
        <br />Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras
        gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat,
        id egestas pede nibh eget odio. Proin tincidunt, velit vel porta
        elementum, magna diam molestie sapien, non aliquet massa pede eu
        diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis.
        Donec eget sem sit amet ligula viverra gravida. Etiam vehicula urna
        vel turpis. Suspendisse sagittis ante a urna. Morbi a est quis orci
        consequat rutrum. Nullam egestas feugiat felis. Integer adipiscing
        semper ligula. Nunc molestie, nisl sit amet cursus convallis, sapien
        lectus pretium metus, vitae pretium enim wisi id lectus. Donec
        vestibulum. Etiam vel nibh. Nulla facilisi. Mauris pharetra. Donec
        augue. Fusce ultrices, neque id dignissim ultrices, tellus mauris
        dictum elit, vel lacinia enim metus eu nunc.
      </div>
    </div>
  </div>
</body>
</html>