如何使用 css 制作边框布局？答案

【问题标题】：How can I make a border-layout using css?如何使用 css 制作边框布局？
【发布时间】：2021-02-19 17:54:35
【问题描述】：

我想为 web 应用创建一个边框布局，其中有一个固定大小的页眉、页脚、侧边栏，以及扩展以填充剩余空间的主要中心内容。

把它想象成你的浏览器，工具栏和状态栏的大小是固定的，侧边栏可以改变大小，但中心的网站会扩展以填充剩余的大小。

为了澄清，我想以像素为单位指定整个设计的高度，例如600px。然后我希望侧边栏和中心<div> 标签向下扩展以填充可用空间，即使它们的内容不足以填充空间。

这里也可以使用网络浏览器类比。即使您在浏览器中查看的页面不高于浏览器窗口，浏览器也不会调整大小。

有没有办法用 CSS 做到这一点？

【问题讨论】：

标签： css layout

【解决方案1】：

div { border : 1px solid #d3d3e3 }

#north    { margin:0;  padding:1em;  }        
#south    { margin:0;  padding:1em;  }        
#east     { margin:0;  padding:1em;  width:6em; height:22em; float:left; margin-right:1.1em }        
#west     { margin:0;  padding:1em;  width:6em; height:22em; float:right; margin-left:1.1em }        
#center   { margin:0;  padding:1em;  padding-bottom:0em; }        
#center:after    { content:' '; clear:both; display:block; height:0; overflow:hidden }

<div id="north">North</div >
<div id="east">East</div>
<div id="west">West</div>
<div id="center">Center</div>
<div id="south">South</div>

直播链接：http://jsfiddle.net/marrok/dGw6K/2/

【讨论】：

如果您知道答案，请在您的答案中发布简短描述和代码。见：meta.stackexchange.com/questions/84342/…
请解释你在这里做了什么
不会按照 OP 的要求增加中心面板的高度

【解决方案2】：

CSS 表格布局可以很好地处理这个问题。

.borderLayout {
  display: table;  
  width: 100%
}

.borderLayout .top {
    display: table-row;
}

.borderLayout .left {
    display: table-cell;
    vertical-align: middle;
    width: 10%;
  }

.borderLayout .center {
    display: table-cell;
    vertical-align: middle;
}

.borderLayout .right {
    display: table-cell;
    vertical-align: middle;
    width: 10%;
  }

.borderLayout .bottom {
    display: table-row; 
}

JSFiddle

【讨论】：

老兄，你很有风格。
不会按照 OP 的要求增加中心面板的高度

【解决方案3】：

我无法找到对我有用的这个问题的答案，所以我尝试了各种尝试。这是我设法使用 flexbox 组合起来的一个简单解决方案。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>

/*div { border : 1px solid #d3d3e3 }*/

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

.borderLayout {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
}

.borderLayout .top {
  width: 100%;
}

.borderLayout .middle {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
}

.borderLayout .middle .side {
}

.borderLayout .middle .center {
  vertical-align: middle;
  flex-grow: 1;
}

.borderLayout .bottom {
    width: 100%;
}

</style>
</head>
<body>
    <div class="borderLayout" style="width: 100%; height: 100%; background-color: cyan;" >
        <div class="top" id="north" style="height: 150px; background-color: red;">North</div >
        <div class="middle" style="background-color: magenta;" >
            <div class="side borderLayout" id="west" style="width: 10%; background-color: yellow;">
                <div class="top" style="height: 100px; background-color: #FF8000;">West 1</div>
                <div class="middle">West 2</div>
                <div class="bottom"  style="height: 75px; background-color: #FF8080;">West 3</div>
            </div>
            <div class="center" id="center" style="background-color: white;">Center</div>
            <div class="side" id="east" style="width: 20%; background-color: green;">East</div>
        </div>
        <div class="bottom" id="south" style="height: 50px; background-color: blue;">South</div>
    </div>
</body>
</html>

【讨论】：

这是最接近的解决方案，因为它会增长中心以填充窗口中的可用空间。但是，如果窗口中没有足够的空间容纳所有面板，则它会在窗口上放置滚动条。恕我直言，最好将滚动条放在中心面板而不是窗口上。

【解决方案4】：

你提到的方法听起来像是页脚棒的工作 - 这已经很老了，但仍然很有魅力......the man in blue - footerStickAlt