标题在较小的屏幕上不会占据整个宽度

Question

我正在使用 astro 创建一个应用程序，并且我使用 Tailwind 作为样式，在移动设备和平板电脑中，我的标题有问题，因为我无法让它在水平滚动时占据 100% 的宽度，页脚也会发生同样的情况。知道它会是什么吗？

<header class="bg-pink-100 p-2 w-full">
    <nav class="text-center">
        <h1 class="text-2xl text-sky-500 font-bold uppercase">Malla Enfermeria UC</h1>
    </nav>
</header>

Answer 1

因为

offsetParent

的

<header>

没有明确的宽度，所以当你说你想要“100％宽度”时，渲染引擎会根据DOM树的上层计算该值：

document.addEventListener("DOMContentLoaded", () => {
  const container = document.querySelector('div.container');

  function updateSize() {
    box = container.getBoundingClientRect();
    document.getElementById("spn-container-width").textContent = "" + box.width;
    box = document.querySelector('.container > header').getBoundingClientRect();
    document.getElementById("spn-c-header-width").textContent = "" + box.width;
    box = document.querySelector('.container > main').getBoundingClientRect();
    document.getElementById("spn-c-content-width").textContent = "" + box.width;
  }
  updateSize();

  const sel = document.getElementById("sel-layout");
  document.getElementById("btn-apply").addEventListener("click", () => {
    container.classList.remove("explicit", "iblock", "sticky");
    switch (sel.value) {
      case "explicit":
        container.classList.add("explicit");
        break;
      case "inline-block":
        container.classList.add("iblock");
        break;
      case "sticky":
        container.classList.add("sticky");
        break;
    }
    updateSize();
  });
});

header {
  width: 100%;
  background-color: #FF9;
}

main {
  display: block;
  width: 500vw;
  background-color: #AAF;
}

div.container {
  display: block;
}

div.container.explicit {
  width: 300vw;
}

div.container.iblock {
  display: inline-block;
  width: auto;
}

div.container.sticky {
  max-width: 100%;
  overflow: auto;
}

div.container.sticky>header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
}

<div class="container">
  <header>This is header</header>
  <main>
    This is main content
    <div>container width: <span id="spn-container-width"></span></div>
    <div>header width: <span id="spn-c-header-width"></span></div>
    <div>content width: <span id="spn-c-content-width"></span></div>
  </main>
</div>
<br /> Layout:
<select size="1" id="sel-layout">
  <option value="normal">Normal (block)</option>
  <option value="explicit">Block with explicit width</option>
  <option value="inline-block">inline-block</option>
  <option value="sticky">Block and sticky</option>
</select>
<button type="button" id="btn-apply">Apply</button>

在上面的例子中：

“正常”布局（可能）是您当前的布局，
```
container
```
没有明确的宽度，因此当您说“100％宽度”时，渲染引擎会尝试从
```
<body>
```
获取该宽度，然后从
```
<html>
```
获取，然后最终来自视口（减去默认边距）；
使用“具有显式宽度的块”布局时，
```
<header>
```
从
```
container
```
获取其宽度；
使用“内联块”布局时，
```
container
```
从其最宽的子级“扩展”，而
```
<header>
```
反过来享受该宽度；
“粘性”布局可能正是您正在寻找的，一种
```
<header>
```
粘到顶部，但仍遵循文档流，与
position:fixed
不同

标题在较小的屏幕上不会占据整个宽度

问题描述投票：0回答：1

1个回答

最新问题

标题在较小的屏幕上不会占据整个宽度

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1