Javascript css/div-定位div顶部、左侧、右侧、底部和中心，仅填充“可见”页面_Javascript_Jquery_Css_Html

Javascript css/div-定位div顶部、左侧、右侧、底部和中心，仅填充“可见”页面

javascript jquery css html

Javascript css/div-定位div顶部、左侧、右侧、底部和中心，仅填充“可见”页面,javascript,jquery,css,html,Javascript,Jquery,Css,Html,大多数人告诉我不要使用表格创建页面布局，而是使用div和CSS。酷-我可以接受。很抱歉问了一个基本问题我想有中心（内容）拉伸到左，右，顶部和底部的可见页面。如果内容超出了带有T、L、R、B div的可见页面，则可以滚动。左、右、上、下div固定在可见页面中的位置。胡闹，我永远到不了那里有没有关于如何解决这个问题的建议 |--------------------------------| <--- Visible page | Top

大多数人告诉我不要使用表格创建页面布局，而是使用div和CSS。酷-我可以接受。很抱歉问了一个基本问题

我想有中心（内容）拉伸到左，右，顶部和底部的可见页面。如果内容超出了带有T、L、R、B div的可见页面，则可以滚动。左、右、上、下div固定在可见页面中的位置。胡闹，我永远到不了那里

有没有关于如何解决这个问题的建议

|--------------------------------|  <--- Visible page
|              Top                             | 
|--------------------------------|    Right/left fixed with stretched height
|------|  Center/content  |------|    Top/bottom fixed height stretched width
|------|                  |------|
|------|         ^        |------|
|------|         |        |------|
| Left |   <--stretch-->  | Right|
|------|         |        |------|
|------|         v        |------|
|------|                  |------|
|--------------------------------|
|             Bottom             | 
|--------------------------------|

|-------------------------------------
使用以下命令
<html>

<head>

</head>

<body>
<body>
    <style>
        .container {
            border: 3px solid #FF00FF;
            width: 100%;
            height: 100%;
        }

        .top {
            background: red;
            height: 3em;
            width: 100%;
        }

        .bottom {
            background: blue;
            height: 3em;
            bottom: 0;
            width:100%;
            float: left;
        }

        .left {
            background: green;
            width: 5em;
            float:left;
            height: 100%;           
            width: 10%;         
        }

        .right {
            background: gold;
            width: 5em;
            float:left;
            height: 100%;                       
            width: 10%;         
        }

        .content {
            background: lightgreen;
            height: 100%;
            width: 80%;
            float:left;
        }            
html, body {
    height:100%;
}

    </style>

    <div class="container">
        <div class="top">
            Top
        </div>

        <div class="left">
            Left
        </div>

        <div class="content">
            Content
        </div>

        <div class="right">
            Right
        </div>
        <div class="bottom">
            Bottom
        </div>
    </div>           
</body>-</body>

</html>


.集装箱{
边框：3px实心#FF00FF；
宽度：100%；
身高：100%；
}
.顶{
背景：红色；
高度：3em；
宽度：100%；
}
.底部{
背景：蓝色；
高度：3em；
底部：0；
宽度：100%；
浮动：左；
}
.左{
背景：绿色；
宽度：5em；
浮动：左；
身高：100%；
宽度：10%；
}
.对{
背景：金；
宽度：5em；
浮动：左；
身高：100%；
宽度：10%；
}
.内容{
背景：浅绿色；
身高：100%；
宽度：80%；
浮动：左；
}            
html，正文{
身高：100%；
}
顶部
左边
内容
赖特
底部
-

拨弄
像这样的
旁注：除非父元素明确设置了高度，否则%中的高度将不起作用…您好，您只需要定位左、右div（绿色和黄色部分）正确吗？
<html>

<head>

</head>

<body>
<body>
    <style>
        .container {
            border: 3px solid #FF00FF;
            width: 100%;
            height: 100%;
        }

        .top {
            background: red;
            height: 3em;
            width: 100%;
        }

        .bottom {
            background: blue;
            height: 3em;
            bottom: 0;
            width:100%;
            float: left;
        }

        .left {
            background: green;
            width: 5em;
            float:left;
            height: 100%;           
            width: 10%;         
        }

        .right {
            background: gold;
            width: 5em;
            float:left;
            height: 100%;                       
            width: 10%;         
        }

        .content {
            background: lightgreen;
            height: 100%;
            width: 80%;
            float:left;
        }            
html, body {
    height:100%;
}

    </style>

    <div class="container">
        <div class="top">
            Top
        </div>

        <div class="left">
            Left
        </div>

        <div class="content">
            Content
        </div>

        <div class="right">
            Right
        </div>
        <div class="bottom">
            Bottom
        </div>
    </div>           
</body>-</body>

</html>

html, body {
 height:100%;
}
.container {
 position:relative;
 width: 100%;
 height: 100%;
}
.top {
 height: 50px;
 width: 100%;
 background: red;
}
.left {
 position:absolute;
 top:50px;
 left:0;
 bottom:50px;
 width: 50px;
 background: green;
}
.right {
 position:absolute;
 top:50px;
 right:0;
 bottom:50px;
 width: 50px;
 background: gold;
}
.bottom {
 position:absolute;
 bottom:0;
 width: 100%;
 height: 50px;
 background: blue;
}
.content {
 position:absolute;
 top:50px;
 left:50px;
 right:50px;
 bottom:50px;
 background: lightgreen;
 overflow:scroll;
}