当前位置: 动力学知识库 > 问答 > 编程问答 >

How to get dynamic css layout like that:

问题描述:

I am new to css and layouts and have problem with one layout

I am trying to develop an app in JS, but I would like to have this layout in pure css. Is it possible?

Here is a fiddle:

http://jsfiddle.net/vxeqL/

My main problem is with blue box, as #left is 100% height, and #left-top has constant height: 200px;

My code co far (HTML):

<div id="header">

</div>

<div id="container">

<div id="left">

<div id="left-top"></div>

<div id="left-bottom"></div>

</div>

<div id="right">

</div>

</div>

<div id="footer">

</div>

and CSS

#header {

height: 60px;

width: 100%;

}

#container {

width: 100%;

height: 100%;

position: absolute;

top: 60px;

bottom: 60px;

left:0;

}

div#left {

width: 600px;

float: left;

height: 100%;

}

div#left-top {

width: 100%;

height: 200px;

}

div#left-bottom {

#width: ?;

#height: ?;

}

div#right {

width:100%;

height: 100%;

margin-left:600px;

}

div#footer {

position: absolute;

width: 100%;

height: 60px;

bottom: 0;

left: 0;

}

网友答案:

Why wouldn't you use just absolute positioning? Check this out: http://jsfiddle.net/hPpTV/

#header, #container, #left, #left-top, #left-bottom, #right, #footer {
    position: absolute;
}
#header {
    top:0;
    height: 60px;
    width: 100%;
}
#container {
    width: 100%;
    top: 60px;
    bottom: 60px;
}
#left {
    top: 0;
    bottom:0;
    width: 300px;
}
#left-top {
    top:0;
    left:0;
    width: 100%;
    height: 200px;
}
#left-bottom {
    top: 200px;
    bottom: 0;
    width: 100%;
    overflow:auto;
}
#right {
    top:0;
    left: 300px;
    right: 0;
    bottom: 0;
    overflow:auto;
}
#footer {
    width: 100%;
    height: 60px;
    bottom: 0;
}
网友答案:
#header {
  height: 60px;
  width: 100%;
}
#container {
 height:100%;
}
div#left {
width: 600px;
float: left;
height: 100%;
}
div#left-top {
width: 100%;
height: 200px;
}
div#left-bottom {
height:150px;
width:100%;
overflow-x:scroll;
overflow-y:hidden;
}
div#left {
width:40%;
float:left;
height: 100%;
}
div#right {
width:60%;
height: 100%;
float:right;
}
div#footer {
width: 100%;
height: 60px;
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: