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

qhhrdooz 于 2023-04-01 发布在其他

关注(0)|答案(2)|浏览(148)

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

What works

灰色标题必须填写100%的窗口宽度在任何时候
绿色/黄色元素必须根据窗口宽度调整大小（min-width/max-width）
蓝色标题是绿色标题的扩展，但没有灰色背景

What doesn't work

在调整窗口大小时，绿色/蓝色/黄色元素必须始终遵循相同的宽度（蓝色元素则不是）

如何使蓝色元素工作的描述（没有灰色背景）？我是开放的，如果有一个更好的解决方案：）
蓝色标题固定为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>

css

来源：https://stackoverflow.com/questions/75896617/min-width-and-max-width-in-position-fixed

2条答案

按热度按时间

cgfeq70w1#

添加样式

#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%;
}

赞(0）回复(0）举报 2023-04-01

dzhpxtsq2#

absolute定位的div应该嵌套在min-width div中，min-width div应该设置为position: relative;。
将您的自定义--content-width、max和min添加到#page_header上，而不是#page_header_content上，这样它就像其他文件一样位于父文件上。
将#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>

为您的方便而小提琴：A fiddle for clarkk

赞(0）回复(0）举报 2023-04-01

我来回答

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

What works

What doesn't work

2条答案

添加样式

相关问题

热门标签

最新问答