Website Layout height problems what am i doing wrong?

Fionn 0
Viewed 24

Hello everyone.

Since 3 Day's i'm trying to find a solution for my problem. I'm making a Portfolio website with a fixed header, and a fixed sidebar. In the content container i have multiple sections which are 100% of the parent div, later i'll add a snap scrolling effect so everything looks cool, i already got this working and all is fine.

The Problem:

All the sections needs to stay at the same height, but when i put a lot content inside a section, all sections getting bigger - but i want the content of the section to overflow:scroll so i can scroll inside the section and when i reached the bottom i want to scroll to the next section.

Second Problem: When the whole window gets smaller in height i want the .site to overflow:scroll

This is how it should look like: Look here

But when the inside of a section is higher than the section self: Look here

Here is a code of a similar layout that i'm using on my homepage:

html, body {
    margin: 0;
    background: lightgrey;
    height: 100vh;
}

.site {
    display: flex;
    flex-direction: column;
    box-shadow: inset 0 0 0 2px red ;
    height: 100%;
}

.header {
    padding: 40px 0;
    text-align: center;
    background: red;
}
.main {
    flex: 1;
    display: flex;
    
}
.sidebar {}
.content {
    display: flex;
    flex-direction: column;
    background: blueviolet;
    overflow-y: scroll;
    flex: 1;
    
}

.section {
    flex: 0 0 100%;
    
}
.section:last-child{
    background: blue
}
<html>
    <body>
        <div class="site">
            <div class="header">header</div>
            <div class="main">
                <div class="sidebar">sidebar1</div>
                <div class="content">
                    <div class="section">Now i want the content inside here to overflow inside of this section, but the section has to keep the same height.<br>You can see the Problem if you run this emmet: <h1>Overflow</h1><h1>Overflow</h1><h1>Overflow</h1><h1>Overflow</h1><h1>Overflow</h1><h1>Overflow</h1><h1>Overflow</h1><h1>Overflow</h1><h1>Overflow</h1><h1>Overflow</h1><h1>Overflow</h1><h1>Overflow</h1><h1>Overflow</h1><h1>Overflow</h1><h1>Overflow</h1><h1>Overflow</h1><h1>Overflow</h1><h1>Overflow</h1></div>
                    <div class="section">section</div>
                </div>
                <div class="sidebar">sidebar2</div>
            </div>
        </div>
    </body>
</html>

Here is a image of the design i created that describes the problem: Layout image

If someone could help me it would be amazing.

Thank you and have a nice weekend :)

sass css html
2 Answers

So I've recreated your example. Used some different tags, but those are just semantics. With this structure only 4 css rules are very important, the rest is just for styling. I've put some emphasis on those important styles.

In this solution you are recreating a site that makes use of the full viewport but not more then that. In other words use 100vh. After that you want just a small part of the page to scroll. As you've set a height to that part now it will be scrollable.

*{
  margin: 0;
  box-sizing: border-box; /*important*/
}

header {
  text-align: center;
  background-color: red;
  height: 100px; /*important*/
}

main {
  height: calc(100vh - 100px); /*important*/
  display: flex;
  border: 2px solid red;
}

aside{
  padding: 0 2em;
}

section {
  overflow-y: scroll; /*important*/
}

article {
  background-color: lightblue;
  border-top: 2px solid black;
  padding-bottom: 40vh;
}
<header>
  <p>HEADER</p>
</header>

<main>
  <aside>sidebar</aside>
  <section>
    <p>Now i want the content inside here to overflow inside of this section, but the section has to keep the same height. You can see the Problem if you run this emmet:</p>
    <article><h1>Article title</h1><p>Some content</p></article>
    <article><h1>Article title</h1><p>Some content</p></article>
    <article><h1>Article title</h1><p>Some content</p></article>
    <article><h1>Article title</h1><p>Some content</p></article>
  </section>
  <aside>sidebar</aside>
</main>

EDIT

So at first I tried to answer your request with the scrollbar in section with all the content. However after your response to the above solution I like to suggest something else. One that fits the user experience a bit better and is still true to your last design. The big difference. We make the header and sidebars fixed and let the rest of the page grow normally. That way the user uses it's regular scrollbar from the browser and the header and sidebars will still stay in view.

*{
  margin: 0;
  box-sizing: border-box; /*important*/
}

header {
  /*important*/
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  z-index: 999;
  
  text-align: center;
  background-color: red;
}

aside {
  /*important*/
  position: fixed;
  top: 100px;
  width: 75px;
  height: calc(100vh - 100px);
  z-index: 999;
  overflow-y: auto;
  
  text-align: center;
  background-color: grey;
}

.sidebar-left {
  left: 0;
}

.sidebar-right {
  right: 0;
}

main {
  /*important*/
  position: absolute; 
  top: 100px;
  left: 75px;
  width: calc(100% - 150px);
  min-height: calc(100% - 100px);
  
  border: 2px solid red;
}

article {
  /*important*/
  height: 350px;
  overflow-y: auto;
  
  
  background-color: lightblue;
  border-top: 2px solid black;
}
<!-- Fixed elements -->
<header>HEADER</header>
<aside class="sidebar-left">sidebar</aside>
<aside class="sidebar-right">sidebar</aside>
  
<<main>
    <p>Now i want the content inside here to overflow inside of this section, but the section has to keep the same height. You can see the Problem if you run this emmet:</p>
    
    <article><h1>Article title</h1><p>Some content</p></article>
    <article><h1>Article title</h1><p>Some content</p><p>Some content</p><p>Some content</p><p>Some content</p><p>Some content</p><p>Some content</p><p>Some content</p><p>Some content</p><p>Some content</p><p>Some content</p><p>Some content</p><p>Some content</p><p>Some content</p><p>Some content</p><p>Some content</p><p>Some content</p><p>Some content</p><p>Some content</p><p>Some content</p><p>Some content</p><p>Some content</p><p>Some content</p><p>Some content</p><p>Some content</p><p>Some content</p><p>Some content</p><p>Some content</p><p>Some content</p></article>
    <article><h1>Article title</h1><p>Some content</p></article>
    <article><h1>Article title</h1><p>Some content</p></article>
  
 </main>

T-S0

Very simple, add a fixed height to your sections and overflow-y: scroll; and should get what you want

Issa Habhab0
Related