英文:
min-width and max-width in position fixed
问题
如何使min-width和max-width在定位元素中起作用？
有效的部分
- 灰色标题必须始终填满窗口宽度的100%
- 绿/黄元素必须根据窗口宽度调整大小（使用
min-width/max-width） - 蓝色标题是绿色标题的延伸，但没有灰色背景
不起作用的部分
- 绿色/蓝色/黄色元素在调整窗口大小时必须始终具有相同的宽度（蓝色元素除外）
如何使蓝色元素按照描述的方式工作（没有灰色背景）？如果有更好的解决方案，我也愿意接受 
蓝色标题固定为min-width
https://jsfiddle.net/wahdr9j7/4/
英文:
How to make min-width and max-width work in positioned elements?
What works
- The gray header must fill out 100% of the window width at all times
- The green/yellow elements must resize depending on window width (
min-width/max-width) - The blue header is an extension of the green header, but without the gray background
What doesn't work
- The green/blue/yellow elements must follow the same width at all times when you resize the window (the blue element does not)
How to make the blue element work as described (without the gray background)? I'm open if there is a better solution
The blue header is fixed to min-width
https://jsfiddle.net/wahdr9j7/4/
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
: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));
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案1
得分: 1
absolute 定位的 div 应嵌套在设置为 position: relative 的 min-width div 内。
在 #page_header 上添加你自定义的 --content-width 的 max 和 min，而不是在 #page_header_content 上，这样它会在父元素上，就像其他元素一样。
将 #page_header 设置为 relative，将 #page_header_content 设置为 absolute。
英文:
The absolute positioned div should be nested in the min-width div which should be set to position: relative;.
Add your custom --content-width max and min on #page_header instead of #page_header_content so it's on the parent like the others.
Set #page_header to relative and #page_header_content to absolute.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
: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));
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
Fiddle for your convenience: A fiddle for clarkk
答案2
得分: 0
添加这些样式
#header,
#page_header_content,
#content {
max-width: var(--content-width-max);
/* 为更好的响应性，您可以删除 min-width: var(--content-width-min); */
}
#page_header {
position: absolute;
height: var(--page-header-height);
width: 100%;
padding-right: var(--sidebar-width);
/* 移除背景: 蓝色 */
}
#page_header_content {
background: blue;
height: 100%;
}
英文:
add these styles
#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%;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论