csstailwind-css

Header does not occupy full width on smaller screens

I'm creating an app with astro and I'm using tailwind for the styles, in mobile devices and tablets I have a problem with the header because I can't get it to occupy 100% of the width when scrolling horizontally, the same happens with the footer. Any idea what could it be?

<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>

enter image description here

Solution

  • Because the offsetParent of <header> does not have an explicit width, so when you say you want "100% width", rendering engine calculate that value according to upper level of DOM tree:

    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>

    In the example above: