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

布满荆棘的人生 2022-10-06 10:49 122阅读 0赞

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

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标记的正上方。

发表评论取消回复

表情：

评论列表（有 0 条评论，122人围观）

还没有评论，来说两句吧...

相关阅读

相关 Eclipse 调整Tomcat 内存大小

在eclipse的菜单Run --> Run Configurations 中选中Apache Tomcat 然后再对应的右侧的的Arguments的VM arguments中

偏执的太偏执、/ 2023年10月18日 16:53/ 0 赞/ 164 阅读

相关调整图像大小调整图片大小

`B = imresize(A,scale)` `B = imresize(A,[numrows numcols])` `[Y,newmap] = imresize(X,m

曾经终败给现在/ 2023年08月17日 15:57/ 0 赞/ 187 阅读

相关 Android底部栏大小调整

效果图 ![20201009103428799.gif][] 通常安卓底部栏开发的时候，拿到的或者找到的icon大小有时候并不是合适的，这时候就要调整大小以达到整体界面的协

柔光的暖阳◎/ 2022年12月13日 01:37/ 0 赞/ 228 阅读

相关 jvm内存默认大小，及如何调整大小

jvm大小默认是64m，如果也要增大程序运行的内存，如果要调整JVM的大小，可以在run configuration中配置VM的参数 ,-Xmx100m表示配置其的大小为100

╰半橙微兮°/ 2022年12月10日 13:29/ 0 赞/ 321 阅读

相关 QT 调整初始窗口大小

默认QT对话框的窗口大小可能不符合预设要求，可以在构造函数中加入以下代码即可解决： resize(QSize(980, 590)); 如果是继承于QWidget，则

清疚/ 2022年10月16日 06:24/ 0 赞/ 445 阅读

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

以下代码笔示例为我提供了使布局正常运行所需的信息： CSS： .header \{ height: 50px; \} .body \{ position: abso

布满荆棘的人生/ 2022年10月06日 10:49/ 0 赞/ 123 阅读

相关 IDEA调整内存大小

IntelliJ IDEA2021.1版本修改内存大小内存调整 help->Edit Custom CM Options ![在这里插入图片描述][

末蓝、/ 2022年09月12日 10:53/ 0 赞/ 305 阅读

相关 QTextEdit 适应内容调整大小

关于调整控件大小主要为自适应部分基本情况：在TableWidget(简称table)内加入(简称edit)TextEdit让table自适应edit的内容

我会带着你远行/ 2022年06月09日 03:50/ 0 赞/ 730 阅读

相关 JS调整html元素大小

想在页面上实现拖动两个元素分界位置可以改变元素的大小，基本思路是：在两个元素之间增加一个分界元素，监听该元素的mousedown事件，事件触发时立刻设置监听页面

野性酷女/ 2022年05月28日 11:00/ 0 赞/ 347 阅读

相关 tomcat调整jvm内存大小

解压版TOMCAT 1.tomcat中webapps下面有manager项目的时候可以查看虚拟机内存使用情况 ①修改/conf/tomcat-users.xml

ゝ一世哀愁。/ 2022年05月11日 06:06/ 0 赞/ 334 阅读