0

I need to build a standard web app with a header, a left side bar (scrollable if too many optinos) and a content are at the right size.

Here is my attempt:

.wrapper {
  font-size: 14px;
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.layout {
  box-sizing: border-box;
  display: flex;
  height: 100%;
  width: 100%;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.header {
  display: flex;
  height: 100%;
  width: 100%;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: grey;
  padding: 10px;
}

.content {
  display: flex;
  height: 100%;
  width: 100%;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.content-sidebar-layout {
  display: flex;
  height: 100%;
  width: 100%;
  flex: 0 1 auto;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
}

.sidebar {
  display: flex;
  padding: 16px;
  height: 100%;
  width: auto;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background-color: red;
  overflow-y: auto;
}

.pagedata {
  display: flex;
  padding: 16px;
  height: 100%;
  width: 100%;
  text-wrap: nowrap;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background-color: blue;
}
<html>
<div class="wrapper">
  <div class="layout">
    <div class="header">
      This is the header
    </div>
    <div class="content">
      <div class="content-sidebar-layout">
        <div class="sidebar">
          <div>Option 1</div>
          <div>Option 2</div>
          <div>Option 3</div>
          <div>Option 4</div>
        </div>
        <div class="pagedata">
          <p>This is the page data</p>
          <p>This is the page data</p>
          <p>This is the page data</p>
          <p>This is the page data</p>
          <p>This is the page data</p>
          <p>This is the page data</p>
          <p>This is the page data</p>
          <p>This is the page data</p>
        </div>
      </div>
    </div>
  </div>
</div>

</html>

The sidebar must be fixed at the left side. If the number of options exceeds the available height, the scroll bar must scroll vertically.

For the main content area, it must be scrollable X and Y depending on the content size with no relation to the sidebar scroll (they should be independent).

The content-sidebar-layout is a wrapper class to the page content, as some pages does not have a sidebar (like the login, error and some other pages).

How to fix the given code to have the desired behaviour without using jQuery or javascript (pure CSS/HTML solution) ?

There are many posts describing individual aspects of heights, but I cannot find on SO a full layout like this.

Mendes
  • 17,489
  • 35
  • 150
  • 263
  • What behavior should the header have when scrolling? – Cameron Little Apr 04 '20 at 11:12
  • How are you expecting to have a vertical scroll bar when you defined the height as 100%? you will never be able to see the scroll in this case. – Manjuboyz Apr 04 '20 at 11:12
  • height:100% to body/html + margin:0 to body + overflow:auto to .pagedata and .content + box-sizing:border-box to your elements – Temani Afif Apr 04 '20 at 11:12
  • Added a duplicate for each issue (also I don't see why you are setting `height: 100%; width: 100%;` for header – Temani Afif Apr 04 '20 at 11:16
  • @TemaniAfif you mean even though the wrapper div has 100% height we still can achieve vertical scroll? – Manjuboyz Apr 04 '20 at 11:17
  • The header must be fixed at the top/left. – Mendes Apr 04 '20 at 11:19
  • 1
    @Manjuboyz yes you can, height:100% will restrict the height thus you will have overflow and a scroll will appear (you need to correctly set the different styles like I commented and it will work) – Temani Afif Apr 04 '20 at 11:21
  • @TemaniAfif Hmmmm should try this out once! thanks for the info though! – Manjuboyz Apr 04 '20 at 11:23
  • @TemaniAfif: Can't find out why you close it. I've spend 2 hours in SO trying to find solution using my nested elements and decided to open a question... Your related posts solves part of the problem, but not the whole... Should I need to ask it differently?? – Mendes Apr 04 '20 at 11:25
  • I gave you a comment with the fixes you need AND I added the duplicate so you can understand the fixes I gave you. Apply the CSS I gave you and if you still face an issue, either edit your question or ask here in the comment – Temani Afif Apr 04 '20 at 11:32
  • Sorry, but what is a duplicate? How can I access it? – Mendes Apr 04 '20 at 11:34
  • refresh this page and check the top of your answer you will find a list of duplicate question – Temani Afif Apr 04 '20 at 11:36
  • Oh, duplicate questions. Got it. As I said the duplicated posts solves part of the problem, no the whole. I've added what you've commented but the sidebar is still scrolling... Why not keep it opened for answers?? It's not exactly a duplicate... – Mendes Apr 04 '20 at 11:40
  • edit your question with the new code showing that only a part is solved and what is missing then if the duplicate aren't suitable, the question ca be reopened. This is the purpose of duplicate. If it doesn't fully help you edit to explain (AND show) why it doesn't – Temani Afif Apr 04 '20 at 11:52

0 Answers0