html 鼠标调整div大小,html - 窗口大小更改时，调整标题和内容div的大小会响应，但要保持右侧边栏的大小 - 堆栈内存溢出...

以下代码笔示例为我提供了使布局正常运行所需的信息：

CSS：

.header {

height: 50px;

}

.body {

position: absolute;

top: 50px;

right: 0;

bottom: 0;

left: 0;

display: flex;

}

.sidebar {

width: 140px;

}

.main {

flex: 1;

display: flex;

flex-direction: column;

}

.content {

flex: 1;

display: flex;

overflow: auto;

}

.box {

min-height: -webkit-min-content;

display: flex;

}

.column {

padding: 20px;

border-right: 1px solid #999;

}

.column > div {

height: 2000px;

background: red;

}

.column:nth-child(2) > div {

height: auto;

}

/* All of these are just for this demo's design. */

body {

font-family: sans-serif;

font-size: 20px;

line-height: 50px;

text-transform: uppercase;

font-weight: bold;

}

.header {

text-align: center;

color: #fff;

background: #444;

}

.sidebar {

background: #666;

padding: 4px 20px;

color: #fff;

}

.page-header {

padding: 6px 20px;

background: #004141;

color: #fff;

font-size: .8em;

}

.content {

background: #ddd;

}

HTML：

Main header

移动此内容：

Sidebar

Page Header. Content columns are below.

Column 1

Column 1

Column 1

到这里：

Sidebar

为了使侧边栏位于右侧，我只需将

Sidebar

到.body类的div标记的正上方。