最小宽度和最大宽度固定位置

Question

如何使min-width和max-width在定位元素中工作？

什么有效

• 灰色标题必须始终填写窗口宽度的 100%
• 绿色/黄色元素必须根据窗口宽度(min-width/max-width)调整大小
• 蓝色标题是绿色标题的扩展，但没有灰色背景

什么不起作用

• 调整窗口大小时，绿色/蓝色/黄色元素必须始终遵循相同的宽度(蓝色元素不会)

如何使蓝色元素按描述工作(没有灰色背景)？如果有更好的解决方案，我愿意:)

蓝色标题固定为min-width

https://jsfiddle.net/wahdr9j7/4/

:root {
--header-height: 50px;
--page-header-height: 50px;
--sidebar-width: 100px;
--content-width-min: 400px;
--content-width-max: 500px;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
header,
#sidebar {
position: fixed;
top: 0;
left: 0
}

/* this gray header has to fill up the full width */
header {
width: 100%;
height: var(--header-height);
background: gray;
}
header,
main {
padding-left: var(--sidebar-width);
}
#header {
height: 100%;
background: green;
}
#page_header {
position: absolute;
height: var(--page-header-height);
background: blue;
}
#sidebar {
width: var(--sidebar-width);
min-height: 100%;
background: red;
}
#header,
#page_header_content,
#content {
max-width: var(--content-width-max);
min-width: var(--content-width-min);
}
#content {
background: yellow;
}
main {
padding-top: calc(var(--header-height) + var(--page-header-height));
}

<header>
<div id="header">
main header
<div style="text-align:right">right-aligned</div>
</div>
<div id="page_header">
<div id="page_header_content">
page header
<div style="text-align:right">right-aligned</div>
</div>
</div>
</header>
<div id="sidebar">
sidebar
</div>
<main>
<div id="content">
content
<div style="text-align:right">right-aligned</div>
</div>
</main>

Answer 1

定位absolute的div 应该嵌套在应设置为position: relative;的min-widthdiv 中。

在#page_header而不是#page_header_content上添加自定义--content-widthmax和min，以便像其他一样在父级上。

将"#page_header"设置为"relative"，#page_header_content设置为"absolute"。

:root {
--header-height: 50px;
--page-header-height: 50px;
--sidebar-width: 100px;
--content-width-min: 400px;
--content-width-max: 500px;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
header,
#sidebar {
position: fixed;
top: 0;
left: 0
}

/* this gray header has to fill up the full width */
header {
width: 100%;
height: var(--header-height);
background: gray;
}
header,
main {
padding-left: var(--sidebar-width);
}
#header {
height: 100%;
background: green;
}
#page_header {
position: relative;
height: var(--page-header-height);
background: blue;
}
#page_header_content {
position: absolute;
width: 100%;
}
#sidebar {
width: var(--sidebar-width);
min-height: 100%;
background: red;
}
#header,
#page_header,
#content {
max-width: var(--content-width-max);
min-width: var(--content-width-min);
}
#content {
background: yellow;
}
main {
padding-top: calc(var(--header-height) + var(--page-header-height));
}

<header>
<div id="header">
main header
<div style="text-align:right">right-aligned</div>
</div>
<div id="page_header">
<div id="page_header_content">
page header
<div style="text-align:right">right-aligned</div>
</div>
</div>
</header>
<div id="sidebar">
sidebar
</div>
<main>
<div id="content">
content
<div style="text-align:right">right-aligned</div>
</div>
</main>

为了您的方便而小提琴：克拉克的小提琴

Answer 2

添加这些样式

#header,
#page_header_content,
#content {
max-width: var(--content-width-max);
/* you can remove min-width: var(--content-width-min); for better responsive */
}
#page_header {
position: absolute;
height: var(--page-header-height);
width: 100%;
padding-right: var(--sidebar-width);
/* remove background: blue */
}
#page_header_content {
background: blue;
height: 100%;
}