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>
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:
container
does not have explicit width, so when you say "100% width", rendering engine tries to get that from <body>
, and then <html>
, and ultimately from viewport (minus default margin);<header>
get its width from container
;container
got "expanded" from its widest child, and <header>
in turn enjoy that width;<header>
that sticks to the top, but still follows the document flow, unlike position:fixed