make container not take more remaining space-CodePudding

I am trying to build something like in the snippet here:

.overall-container {
  height: screen;
  border: 1px solid black;
  padding: 2px;
}

.scroll-menu {
  overflow-y: auto;
  border: 1px solid blue;
  padding: 2px;
  height: 100px; // this should be the rest of the screen height
}

<div >
  <div>
    Header
  </div>
  <div >
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
    <div>Element 8</div>
    <div>Element 9</div>
    <div>Element 10</div>
    <div>Element 11</div>
    <div>Element 12</div>
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
    <div>Element 8</div>
    <div>Element 9</div>
    <div>Element 10</div>
    <div>Element 11</div>
    <div>Element 12</div>
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>

  </div>
</div>

The problem: I want to make scroll-menu a container to scroll through, so that you cant scroll through overall-container. Header should always be visible that way. That would mean I would need to limit scroll-menu's height someway, but I do not know how.

CodePudding user response：

Solution is, use Flexbox. Set the parent container overall-container to display: flex; height: 100vh; and the child container scroll-menu to take all the available space using the flex-grow: 1 or shorthand flex: 1 property.

body, html { margin: 0; padding: 0 } /* added to remove the default margin and padding */

.overall-container {
  height: screen;
  border: 1px solid black;
  padding: 2px;

  /* add these lines */
  display: flex;
  flex-direction: column;
  height: 97vh;
}

.scroll-menu {
  overflow-y: auto;
  border: 1px solid blue;
  padding: 2px;

  flex: 1; /* add this line */
}

<div >
  <div>
    Header
  </div>
  <div >
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
    <div>Element 8</div>
    <div>Element 9</div>
    <div>Element 10</div>
    <div>Element 11</div>
    <div>Element 12</div>
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
    <div>Element 8</div>
    <div>Element 9</div>
    <div>Element 10</div>
    <div>Element 11</div>
    <div>Element 12</div>
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>

  </div>
</div>

CodePudding user response：

i'm not really sure what you want to do, but if you want some element to take the whole height of the screen you can try to give it height: 100vh

CodePudding user response：

You can set the position property of "header" div to sticky. That way, header will always show at the top while you can scroll through the rest of the items. You might think of re-wording your question.

CodePudding user response：

The height: screen; doesn't work because screen is not a valid property value: it is not even present in Chrome Devtools Style editor. So it might be you meant -webkit-fill-available, but this last one is non standard and still experimental and it kinda work, but not very well yet, so don't use it just yet, and let's hope for the future.

So you might consider to use for the continer:

height:100vh;

considering that 1vh is 1% of browser screen height or even less.

Also, for the div that contains the header, I'd suggest to use a h[1-6] or the elements because they are the header element "semantically correct" to be used as header, but you can keep the div element if you wish.

Also in css you could use for example:

height: calc( 100vh - 25px );

the calc() css function would calculate for you the view port height (100vh) and will subtract 25px from it. But in this case you need to know what is the element height to subtract.

body, html { margin: 0; padding: 0 } /* added to remove the default margin and padding */

.overall-container
{
  background: orange;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  height: 89vh; /* Using here 90 instead of 100 vh, to compensate the borders thickness and padding, that you need to subtract to make them visible into the page, if you don't, the bottom border ends up hidden down the page. Decreasing or removing  border and padding (for instance by commenting the rows so you can experiment) you can increase this value up to 99 or even 100 to make the element to expand to the whole view port*/
}

.scroll-menu
{
  background: yellow;
  border: 1px solid blue;
  flex: 1;
  overflow-y: auto;
}

.header, .overall-container, .scroll-menu
{
  padding: 10px;
}

<div >
  <div >
    Header
  </div>
  <div >
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
    <div>Element 8</div>
    <div>Element 9</div>
    <div>Element 10</div>
    <div>Element 11</div>
    <div>Element 12</div>
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
    <div>Element 8</div>
    <div>Element 9</div>
    <div>Element 10</div>
    <div>Element 11</div>
    <div>Element 12</div>
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
  </div>
</div>

Nevertheless it seems to me that you want to built a menu. What about to try a little different approach with the use of details/summary html elements? ... it is just a possible alternative.

details > details,
details > a
{
  padding: 0px 20px 0px 20px;
}

<details>
  <summary>
    In line menu title (click to show sub elements) ☰
  </summary>
  <a href="yourpage.html">Your Page.html</a> | <a href="yourpage.html">Your Page.html</a> | <a href="yourpage.html">Your Page.html</a> | <a href="yourpage.html">Your Page.html</a> | <a href="yourpage.html">Your Page.html</a> | <a href="yourpage.html">Your Page.html</a> | <a href="yourpage.html">Your Page.html</a> | <a href="yourpage.html">Your Page.html</a></details>

<br>

<details>
  <summary>
    Vertical menu example (click to show sub elements) ☰
  </summary>
  <a href="yourpage.html">Your Page.html</a><br>
  <a href="yourpage.html">Your Page.html</a><br>
  <a href="yourpage.html">Your Page.html</a><br>
  <a href="yourpage.html">Your Page.html</a><br>
  <a href="yourpage.html">Your Page.html</a><br>
  <a href="yourpage.html">Your Page.html</a><br>
  <a href="yourpage.html">Your Page.html</a><br>
  <a href="yourpage.html">Your Page.html</a>
</details>

<br>

<details open>
  <summary>
    Vertical menu example (already opened, click to close) ☰
  </summary>
  <a href="yourpage.html">Your Page.html</a><br>
  <a href="yourpage.html">Your Page.html</a><br>
  <a href="yourpage.html">Your Page.html</a><br>
  <a href="yourpage.html">Your Page.html</a><br>
  <a href="yourpage.html">Your Page.html</a><br>
  <a href="yourpage.html">Your Page.html</a><br>
  <a href="yourpage.html">Your Page.html</a><br>
  <a href="yourpage.html">Your Page.html</a>
</details>

<br>

<details>
  <summary>
    Vertical menu example with sub menu ☰
  </summary>
  <a href="yourpage.html">Your Page.html</a><br>
  <a href="yourpage.html">Your Page.html</a><br>
  <a href="yourpage.html">Your Page.html</a><br>
  <a href="yourpage.html">Your Page.html</a><br>
  <a href="yourpage.html">Your Page.html</a><br>
  <a href="yourpage.html">Your Page.html</a><br>
  <a href="yourpage.html">Your Page.html</a><br>
  <a href="yourpage.html">Your Page.html</a><br>

  <details>
    <summary>
      The Sub menu ☰
    </summary>
    <a href="yourpage.html">Your Page.html</a><br>
    <a href="yourpage.html">Your Page.html</a><br>
    <a href="yourpage.html">Your Page.html</a><br>
    <a href="yourpage.html">Your Page.html</a><br>
    <a href="yourpage.html">Your Page.html</a><br>
    <a href="yourpage.html">Your Page.html</a><br>
    <a href="yourpage.html">Your Page.html</a><br>
    <a href="yourpage.html">Your Page.html</a><br>
  </details>
</details>

Of course you might need to style the menu as you need.

Also another valid approach is to style as sticky the element that acts as header to prevent it from scrolling with the rest: In this case you dont even need a second div:

.overall-container
{
  background: orange;
  border: 1px solid black;
  height: calc(100vh - 28px);
  overflow-y: auto;
  padding: 0px 10px 10px 10px;
}

h3
{
    background: red;
    position: sticky;
    top: 0px;
    margin: 0px;
}

<div >
  <h3>Header</h3>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
  Menu Element n<br>
</div>

Notice that I have set on purpose the css of the header as red bgcolor to distinguish it from the rest to make you able to spot how the rest of the elements stay under it while scrolling them. Of course setting it as orange, the same color the container, won't be noticeable any difference.