Is it possible to vertically resize just one of three divs to match the size of the window?

Question

Is it possible to vertically resize just one of three divs to match the size of the window?

I'm facing a challenge in creating a responsive webpage with multiple divs. Here is the structure I am trying to achieve:

<div id="container"> maximum width of 1200 and height of 1000
    <div id="vertically-static-top">20 pixels high</div>
    <div id="vertically-resizeable-middle">height can be adjusted</div>
    <div id="vertically-static-bottom">50 pixels high</div>
</div>

The maximum width and height for the overall container are set to 1200 and 1000 respectively.

The vertically-static divs should resize only horizontally when the browser window is resized, maintaining a fixed height vertically.

On the other hand, the vertically-resizable div needs to adjust both its width and height based on the dimensions of the window.

I am struggling to make the middle div resize vertically while keeping all content within the browser window. Any help would be greatly appreciated!

Thank you!

html css resize responsive

Answer 1

Answer №1

In my opinion, the solution involves utilizing the position property with a value of absolute. Below is a snippet demonstrating this approach.

html,
body {
  font: 13px Verdana;
  margin: 0;
  height: 100%;
}

#container {
  max-height: 1000px;
  max-width: 1200px;
  background: red;
  color: #fff;
  height: 100%;
  position: relative;
}

#vertically-static-top,
#vertically-static-bottom,
#vertically-resizeable-middle {
  position: absolute;
  left: 0;
  right: 0;
}

#vertically-static-top {
  height: 20px;
  top: 0;
  background: black;
}

#vertically-static-bottom {
  height: 50px;
  bottom: 0;
  background: black;
}

#vertically-resizeable-middle {
  top: 20px;
  bottom: 50px;
}

<div id="container">
  <div id="vertically-static-top">20 pixels high</div>
  <div id="vertically-resizeable-middle">adjustable height</div>
  <div id="vertically-static-bottom">50 pixels high</div>
</div>

This method should be effective in achieving the desired outcome.

Answer 2

In my opinion, the solution involves utilizing the position property with a value of absolute. Below is a snippet demonstrating this approach.

html,
body {
  font: 13px Verdana;
  margin: 0;
  height: 100%;
}

#container {
  max-height: 1000px;
  max-width: 1200px;
  background: red;
  color: #fff;
  height: 100%;
  position: relative;
}

#vertically-static-top,
#vertically-static-bottom,
#vertically-resizeable-middle {
  position: absolute;
  left: 0;
  right: 0;
}

#vertically-static-top {
  height: 20px;
  top: 0;
  background: black;
}

#vertically-static-bottom {
  height: 50px;
  bottom: 0;
  background: black;
}

#vertically-resizeable-middle {
  top: 20px;
  bottom: 50px;
}

<div id="container">
  <div id="vertically-static-top">20 pixels high</div>
  <div id="vertically-resizeable-middle">adjustable height</div>
  <div id="vertically-static-bottom">50 pixels high</div>
</div>

This method should be effective in achieving the desired outcome.

Answer 3

Answer №2

To achieve this layout, you can utilize flexbox. Below is a demonstration of the code:

#container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical!important;
  -webkit-box-direction: normal!important;
  -ms-flex-direction: column!important;
  flex-direction: column!important;
  height: 240px;
  margin: auto;
  max-height: 1000px;
  max-width: 1200px;
}

#vertically-static-top,
#vertically-static-bottom {
  background-color: #80bdff;
  border-radius: .25rem;
  color: #fff;
  padding: 1rem;
}

#vertically-resizeable-middle {
  background-color: #957bbe;
  border-radius: .25rem;
  color: #fff;
  flex-grow: 1;
  padding: 1rem;
}

<div id="container"> maximum width of 1200 and height of 1000
    <div id="vertically-static-top">20 pixels high</div>
    <div id="vertically-resizeable-middle">adjustable height</div>
    <div id="vertically-static-bottom">50 pixels high</div>
</div>

Adjust the height of #container (height: 240px;) or change it to 100% to fit the height of the parent element

Answer 4

To achieve this layout, you can utilize flexbox. Below is a demonstration of the code:

#container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical!important;
  -webkit-box-direction: normal!important;
  -ms-flex-direction: column!important;
  flex-direction: column!important;
  height: 240px;
  margin: auto;
  max-height: 1000px;
  max-width: 1200px;
}

#vertically-static-top,
#vertically-static-bottom {
  background-color: #80bdff;
  border-radius: .25rem;
  color: #fff;
  padding: 1rem;
}

#vertically-resizeable-middle {
  background-color: #957bbe;
  border-radius: .25rem;
  color: #fff;
  flex-grow: 1;
  padding: 1rem;
}

<div id="container"> maximum width of 1200 and height of 1000
    <div id="vertically-static-top">20 pixels high</div>
    <div id="vertically-resizeable-middle">adjustable height</div>
    <div id="vertically-static-bottom">50 pixels high</div>
</div>

Adjust the height of #container (height: 240px;) or change it to 100% to fit the height of the parent element

Is it possible to vertically resize just one of three divs to match the size of the window?

Answer №1

Answer №2

Similar questions

What is the best way to ensure that text highlighting appears consistent on all browsers?

Inject a <div> element into a table row upon clicking a button using jQuery and PHP

PHP/HTML failing to upload extra large files

Customize items within a bootstrap5 navbar by utilizing traditional CSS styling techniques

Is there a reason why using margin:auto doesn't work for vertically centering items?

Place the emoji where the cursor is located

Swap the content of one div with another div using client-side code only

Tips for customizing the appearance of path elements within an external SVG file being utilized as a background image

Tips on showcasing the elements within a div container using flexbox

How can I incorporate dynamic data to draw and showcase graphs on my website using PHP?

Hover over parts of an image to bring attention to them

The row and col classes will only expand to the full width if they are used within form or p elements

Using AJAX to dynamically edit and update PHP data

Tips on implementing SCSS styles in my create-react-app application along with Material UI components?

Creating a JavaScript function triggered by a click event that will redirect to

Mastering Bootstrap: Achieving flawless column stacking in succession

What is the best way to create a @mixin incorporating variables to easily reference breakpoints using custom aliases?

The rendered typeface may vary from the specified font family

JavaScript Empty Input Field when Duplicating Node

Creating a logo that scales seamlessly across different web browsers while maintaining responsiveness through