All geek questions in one place

CSS positioning task

This is a problem that I have encountered several times over the years, and I always refuse to use JavaScript to perform calculations on the page resize event. Can this be done using pure CSS?

I need to create a CSS layout as follows:

+ ---------------------------
 header ->
+ ---------------------------
 menu | scrollable content
      | --->
   | | |
   v | v
      |
+ ---------------------------
footer ->
+ ---------------------------

A fixed-height header should stick to the top and expand horizontally to fit the very edge of the window. The fixed-height footer must adhere to the bottom and also expand horizontally to fit the extreme edge of the window. The fixed-width menu should lie to the left and expand to fit the header and footer. The content area should fill the remaining space. The content area may scroll, but never the page itself.

+3
source share
6 answers

If you do not need to support IE6, yes.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.Header {
    width: 100%;
    height: 100px;
}
.Menu {
    position: absolute;
    left: 0;
    top: 100px;
    bottom: 50px;
    width: 175px;
}
.Footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 50px;
    width: 100%;
}
.Content {
    position: absolute;
    width: auto;
    height: auto;
    left: 175px;
    top: 100px;
    right: 0;
    bottom: 50px;
    overflow: scroll;
}

I really have not tested this.

+2
source

CSS , IE6, DIV. , , ... ?

<div class="fixed-header"></div>
<div class="menu-content-group"><div class="menu"><div class="menu-child"></div></div><div class="content"><div class="content-child"></div></div></div>
<div class="fixed-footer"></div>


html, body {
  width:100%;
  height:100%;
}

.fixed-header, .fixed-footer {
 display:block;
 position:absolute;
 width:100%;
 height:50px; /* whatever height you want for your header */
 float:left;
 top:0;
 left:0;
 z-index:2;
}

.fixed-footer {
 top:;
 bottom:0;
}

.menu-content-group {
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  float:left;
  top:0;
  left:0;
}

.menu {
  display:block;
  position:absolute;
  width:100px;
  height:100%;
  top:0;
  left:0;
  z-index:1;
}

.content {
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  overflow-x:hidden;
  overflow-y:auto;
}

.menu-child {
  display:block;
  position:relative;
  width:100px;
  height:auto;
  top:50px;
}

.content-child {
  display:block;
  position:relative;
  width:100%:
  padding:50px 0;
  padding-left:100px;
}
+1

DIV : , .

. http://www.quirksmode.org/css/contents.html

IE6? ( WinXP) , .

+1

. this this . ( google ..)

+1

, . div , , , , , . z-index. , ie6 javascript .

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <style type="text/css">
 *{margin:0; padding:0;}
  #header{ height:50px; width:100%; position:fixed; top:0; background:red; z-index:99999;}
    #group{display:table-row; clear:both; width:100%; position:absolute; top:50px; overflow:hidden;}
    #sidebar{display:table-cell; width:200px; background:#e3e; float:left; height:100%; vertical-align:top; position:fixed; top:50px; padding-bottom:150px;}
 #sidebar-inside{padding-bottom:150px; max-height:500px; overflow:hidden;}
    #content{  margin-left:200px;}
 #footer{ height:50px; width:100%; position:fixed; bottom:0; background:red; z-index:99999;}
 </style>

</head>
<body>
 <div id="header"><!-- CONTENT HERE --></div>
    <div id="group"> 
    <div id="sidebar">
  <div id="sidebar-inside"></div>
       </div>
    <div id="content"></div>
    </div>
    <div id="footer"></div>

</body>
0

Source: https://habr.com/ru/post/1725180/

More articles:


All Articles