Content with 100% width and height and autoresize

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:

<div style="height: 500px; width: 100%; border:1px solid black; background: black"></div>

It will look like this:

<a href="https://ibb.co/RB94HCT"><img src="https://i.ibb.co/SdP7vKw/Current.png" alt="Current" border="0"></a>

But I want this behavior:

<a href="https://ibb.co/jhqdMLB"><img src="https://i.ibb.co/SNH2nKW/Expected.png" alt="Expected" border="0"></a>

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
https://jsfiddle.net/2kh20Lsz/

<!-- 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;
}

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

• First and foremost, what is the goal to be achieved? The goal is probably not "the container" itself, but something like "I want to display a slider, that needs to span the entire width of the page. Also, ..."
• Which theme is being used?
  • Themes often come with a sort of grid-framework that sets the width of the container. Looking at your images, a grid seems (= interpretation) to be used in your theme.
  • What is a "standard" page? The template being used also does play a role of course.
  • Which classes/ids have already been used.
  • The css for your container, must play nice with the css already set by the theme.
• It seems (=interpretation), according the provided images images, the content of the header (and footer?) should keep the original container's width. Is that correct?
• Should the entire page have a max height that equals the height of the browsers viewport?
• Should the container be able to scroll or not if its content overflows upon resizing?
• Could the type of content of the container impact the solution?
• Anything else that might impact the solution?

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:
<a href="https://ibb.co/k9Rhm63"><img src="https://i.ibb.co/VQ7vwpH/Current.png" alt="Current" border="0"></a>

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:
<a href="https://ibb.co/vYFXmwp"><img src="https://i.ibb.co/9tDZ286/Expected.png" alt="Expected" border="0"></a>

To answer your questions:

• I think my goal is already described.
• I am using the default Quark theme.
  • Until now, I didn't know that there was some kind of "grid framework". Now I see that there is an option "grid-size" in the theme settings. Can I disable it for only one page?
  • The page is of type "default".
  • I don't know what you mean by "what classes/ids have already been used".
  • I currently do not have a custom CSS file.
• The header and footer are fine as they are.
• The maximum width and height of the entire page should be the size of the window. The maximum height of the map should be the distance between the header and footer.
• I don't want to have a scroll bar on the page. The size of the map should change when the user resizes the window.
• The map uses the div container properties. I don't think the content has any impact on the solution.

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