0

I have an app with many 

<div class="container">
  <div class="header"></div>
  <div class="content"></div>
</div>

like here : http://jsfiddle.net/pceof476/

I can't manage to achieve what I want without having to add calc(100% - headerSize). Since my header can change size, a calculation set in hard would break it when I resize it.

Also I would like my 2 header to be always visible.

something like this http://jsfiddle.net/acs641g5/ but with a scrollbar of the content.

Bobby
  • 4,372
  • 8
  • 47
  • 103

1 Answers1

0

I forked your example and tried to fix the issue. Header height would remain constant if you have two line content then use eclipse. and show header in Title or by default gives height for two lines. If you will not keep a constant height then your design would look broken.

Same thing you can apply for another example. Let me know if you have any question.

*{
  
  box-sizing:border-box;
}
.container {  
  background: blue; 
  padding: 10px; 
  width: 200px; 
}

.fill{
  height: 40px; 
  width: 100%; 
}

.f1{
    background: grey; 
}
.f2{
  background: brown;
}

.content { 
  max-height: 150px; 
  max-width: 100%; 
  overflow-y:auto;
}

.header{
    background: yellow; 
    width:100%;
    padding:10px
}
<div class="container">
  <div class="header">Test</div>
 <div class="content">
    <div class="fill f1"></div>
    <div class="fill f2"></div>
    <div class="fill f1"></div>
    <div class="fill f2"></div>
    <div class="fill f1"></div>
    <div class="fill f2"></div>
 </div>
</div>
Anuj Rastogi
  • 98
  • 6
  • I don7t get exactly what you mean with "if you have two line content then use eclipse". did you just add `box-sizing:border-box` because actually I have the same problem in many place in my angular app. Everything that is sidemenu or header size is not counter. when i do `width` or `height 100%` the size of those element are just ignored and my div go outside the viewsize – Bobby Nov 21 '18 at 07:52
  • You can use ellipsis in css. https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ Where text you can truncate. I added "box-sizing" as it helps in maintaining the layout. – Anuj Rastogi Nov 21 '18 at 17:54