Hi,
I would like to create a div container that automatically expands to 100% of the width and height of the content area of a standard page.
The page should still keep the header and footer - so I’m talking about the area in between.
Currently I have created a container as follows:
It will look like this:
But I want this behavior:
Additionally, I want the container to increase/decrease in size when the user resizes the window.
Can anyone give me a hint on how to do this?
Check this fiddle
<!-- HTML -->
<div class="wrapper">
<div class="header">Header</div>
<div class="content">
<div style="height:500px;">Content</div>
</div>
<div class="footer">Footer</div>
</div>
# CSS
html, body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.header, .footer {
background: silver;
}
.content {
flex: 1;
overflow: auto;
background: pink;
}
<html>
<head>
<style>
:root {
--header: 75px;
--footer: 100px;
}
* {margin: 0; padding: 0}
header {height: var(--header); color: white;background: black}
section {display: flex; flex-wrap: wrap}
section div {flex: 1 1 100%; min-height: calc(100vh - var(--header) - var(--footer)); background: lightskyblue;}
footer {height: var(--footer); background: dimgray;}
</style>
</head>
<body>
<header>Header</header>
<section>
<div>Content</div>
</section>
<footer>Footer</footer>
</body>
</html>
@pireba, The solutions provided by both @Karmalakas and @lisekbox are both viable when the context of your container is being left out.
Unfortunately, the question does not provide much context and leaves ample space for interpretation/assumption and imagination…
A more complete question would answer questions like:
width of the container. Looking at your images, a grid seems (= interpretation) to be used in your theme.width. Is that correct?Please help the community help you by providing clear and succinct information…
You might consider updating the question if above does indeed provide important information impacting a solution.
Agree - It is many ways to achieve the same effect, and without source code we could give only little clue how to get that. Basically what Pireba was looking for is a hint - we give him a sample code, but better advice will be ask him to get familiarised with CSS, especially with flexbox and grid - If he will know enemy he will know how to fight with him 
Hello,
ok I understand, sorry.
I am developing a subpage on my blog that shows a map created with Leaflet. This map is created in a div container.
My goal is to have the map automatically expand to all the free space between the header and footer. As the user resizes the window, I want the map to resize as well - both width and height.
Currently my page looks like this:
There is a blank area to the left and right of the map. I want the map (or div container) to automatically expand to the size of the window - there should be no more empty area.
The same is true for the height. I want to see the header and footer all the time - the map should automatically expand to the space between the header and footer. If the user shrinks the height of the window, the map should also shrink - the same is true for the width.
This is the expected behavior:
To answer your questions:
I hope this explains my problem in more detail.
Hello,
first of all, thank you for the two code examples.
But unfortunately I don’t know what to do with them.
The way I understand Grav so far, the whole HTML tree of a page is created from the “templates/partials/*.html.twig” files inside a theme folder.
In the base.html.twig file, I can see that Grav creates multiple div containers. The content I enter in the admin panel is added to the container of class “container grid-xl”.
If you give me a complete HTML tree as a code example, does that mean I need to modify these twig files? Otherwise, your HTML tree will be added inside the “container grid-xl” container.
If that means I actually have to edit those files, won’t the changes affect all pages?
I’m looking for a solution that only affects this one page (not all pages).
Does what I am writing make sense or am I misunderstanding something?
I think my goal is already described.
yes and we already give you a hint how to achieve that
If you give me a complete HTML tree as a code example, does that mean I need to modify these twig files? Otherwise, your HTML tree will be added inside the “container grid-xl” container.
It mean that you need to fit CSS from example to your HTML and CSS as we dont know your div class names if you did not share code with us
The header and footer are fine as they are.
maximum width and height of the entire page should be the size of the window.
maximum height of the map should be the distance between the header and footer.
If you are using static height for header and footer it is easy to calculate that distance:
100% device viewport height - header - footer:
// example .div_with_map {height: calc(100vh - 75px - 100px)} //
to adjust width U can use flexbox - parent of mentioned div should have display: flex; flex-wrap: wrap and div itself flex: 1 1 100% so the CSS code will look like:
.parent_wrapper {display: flex; flex-wrap: wrap} .div_with_map {flex: 1 1 100%; height: calc(100vh - 75px - 100px)}
html
<div class="parent_wrapper">
<div cass="div_with_map">
...
</div>
</div>
once again fit CSS and HTML from example with your HTML and CSS