티스토리 뷰

xhtml/css

상, 하단 2단 레이아웃 화면 100% 유지

sosohot 2017. 8. 11. 14:51

[소스]

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    * {margin:0;padding:0;box-sizing: border-box;}
    body, html, .wrapper {
      width: 100%;
      height: 100%;
    }

    .container {
      position: relative;
      padding-top: 50px;
      width: 100%;
      height: 100%;
      background: gray;
    }

    .topBox {

      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 50px;
      background: skyblue;
    }

    .bottomBox {
      position: relative;
      width: 100%;
      height: 100%;
      background: orange;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="container">
      <div class="topBox"></div>
      <div class="bottomBox"></div>
    </div>
  </div>
</body>
</html>
[view]

http://jsbin.com/fikudiheya/edit?html,output

저작자표시 (새창열림)

'xhtml/css' 카테고리의 다른 글

부트스트랩(bootstrapk)에서 사용하는 class명 정리  (0) 2021.01.28
익스플로러 IE 만 css 적용 방법  (0) 2020.05.15
CSS만으로 toggle 구현하기  (0) 2017.08.11
테이블 상단 고정 스크롤  (0) 2017.08.11
placeholder 에서 줄바꿈하기  (0) 2017.01.04
댓글