Related
I have an html like this:
<div class="container">
<div class="vertical-btns">
<button>Click</button>
<button>Click</button>
<button>Click</button>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</div>
With this css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
background-color: #71E764;
max-width: 50rem;
height: 100%;
overflow: auto;
max-height: 500px;
margin: auto;
}
.vertical-btns {
position: fixed;
padding-left: 20px;
width: inherit;
max-width: inherit;
flex: auto;
flex-direction: column;
display: flex;
right: 0;
}
The result is that I have a container with 3 fixed buttons but outside of it. What I need is that the buttons stays inside the container on top right. But in this way, with right: 0, it's not relate to the parent container, but it seems relates to the web page. Is there a way to fix this?
that's the codepen and as you can see the buttos are totally on the right of the page instead of the container: https://codepen.io/eryonn/pen/oNBbOwe
Try to use position: absolute; to position an element inside a parent with position: relative; and then position: fixed; on an element inside the absolute positioned
Instead of right: 0; for the element .vertical-btns use
margin-left: min(50rem, 100%);
transform: translateX(-100%);
Why margin-left: min(50rem, 100%)?
That's because your wrapper has not a fixed width, but just a max-width. So when the viewport is smaller than 50rem it becomes responsive so also the margin-left must be lower, accordingly. More information about the CSS min() function can be found on MDN
Note 1: if you're using a CSS preprocessor an error could be raised while compiling the source, probably because the preprocessor already has a min() function. If you want to use the CSS function instead change the case of the letters (e.g Min(...)) since the css function are case-insensitive
Note 2: if your browser doesn't support the min() function in this case you could use a mediaquery which will do the same thing (just a bit more verbose), e.g.
.vertical-btns { margin-left: 100% }
#media (min-width: 50rem) {
.vertical-btns { margin-left: 50rem }
}
Result
"position: fixed" removes the element from the normal flow of the page and positions it in relation to the viewport. You can use "position: sticky" with "top:0" which will make your element stick to the top even when scrolling. Here's the code sample.
.vertical-btns {
position: sticky;
padding-left: 20px;
width: 100%;
flex: auto;
flex-direction: column;
display: flex;
align-items:flex-end;
top:0;
height:0;
}
Just use position: absoulte instead of position: fixed and you can position your buttons relative to the container wherever you want ;-)
Position fixed is allways relative to viewport. Position àbsouteis allways relative to the notstatic`positioned parent element.
See example:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
background-color: #71E764;
max-width: 50rem;
height: 100%;
overflow: auto;
max-height: 500px;
margin: auto;
}
.vertical-btns {
position: absolute;
top: 0;
right: 0;
padding-left: 20px;
width: inherit;
}
<div class="container">
<div class="vertical-btns">
<button>Click</button>
<button>Click</button>
<button>Click</button>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</div>
Note: Updated the code to comments.
I need to fix an element at some position relative to the viewable area of a scroll container. So if the viewable area of an overflowed container is some height and width, I need to position relative to that, even when scrolling. An example would be it either displays 10 pixels from the top no matter how much you scroll or 10 pixels from the bottom (relative to the viewable area - not the total content height). This is a div with overflow, not the window, and the element that is fixed could be any div.
Is this possible with just css?
Ty!
EDIT: afterward I came up with another interesting solution if anyone is interested
.overflow-container {
position: relative;
display: inline-block;
}
.content {
border: 1px solid red;
height: 125px;
overflow: scroll;
width: 500px;
}
.top {
background-color: blue;
color: white;
position: absolute;
top: 0;
}
.right {
background-color: blue;
color: white;
position: absolute;
right: 0;
}
.bottom {
background-color: blue;
color: white;
position: absolute;
bottom: 0;
}
<div class="overflow-container">
<div class="content">
<div class="top">top</div>
<div class="right">right</div>
<div class="bottom">bottom</div>
<div>first</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>last</div>
</div>
</div>
You can use something like this code however you would have to position the element (child) relative to the parent container using top and left parameters in css and position:sticky for the child (element you are trying to "fix"
<style>
body {
height:2000px;
}
.container{
height:400px;
overflow-x:scroll;
border:2px solid red;
}
.parent{
height:800px;
width:100%;
background:linear-gradient(white,black);
position:relative;
}
.child{
position:sticky; /* relative to its parent container */
width:50px;
height:50px;
background:green;
top:20px;
left:20px;
color:white;
}
</style>
</head>
<body><p>Body</p>
<div class="container">
<div class="parent">parent
<div class="child">child</div>
</div>
</div>
</body>
For pure CSS, you can learn more about position: sticky;. The element will stick inside of it's parent. works both top and bottom properties. To use withe bottom in your case the element should be the last child.
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 10px;
}
https://www.w3schools.com/howto/howto_css_sticky_element.asp
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: yellow;
padding: 50px;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Sticky Element: Scroll Down to See the Effect</h2>
<p>Scroll down this page to see how sticky positioning works.</p>
<div class="sticky">I will stick to the screen when you reach my scroll position</div>
<p>Some example text..</p>
<h2>Scroll back up again to "remove" the sticky position.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
</body>
</html>
Used both top and bottom in https://hr.focus.style/
I made a page to practice using flexbox. It has 1 container in red with 3 flex items. When I minimize the screen the items drop below each other but do not use up the full width of container.
How can I achieve this?
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: stretch;
margin: 40px;
background-color: red;
}
.col {
max-width: 400px;
}
.one,
.two-a,
.two-b,
.three {
background-color: black;
color: white;
padding: 20px;
margin: 1rem;
}
h2,
h3 {
font-family: arial;
}
h2 {
margin-left: 2rem;
}
<div class="container">
<!-- <h2>Flexbox</h2> -->
<div class="one col">
<h3>Step 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget dui ut justo auctor semper a ullamcorper justo. Morbi placerat tortor tortor, ac dignissim leo semper ac. Donec non metus sit amet neque eleifend rhoncus vitae id dolor. Etiam vestibulum
lobortis sem semper laoreet. Vestibulum egestas elit sed lacus egestas, placerat congue erat faucibus. Nunc ac dui auctor, fermentum turpis ac, mattis magna. Nulla pellentesque, ligula vel faucibus imperdiet, arcu ligula ornare quam, et blandit
risus sem sit amet neque. Curabitur commodo dui et metus suscipit, ut dignissim risus hendrerit. Quisque at odio nec risus condimentum ullamcorper. Nulla sit amet felis sit amet neque aliquet auctor sed nec metus. Sed gravida mattis sem, nec finibus
diam suscipit sit amet.</p>
</div>
<div class="two col">
<div class="two-a">
<h3>Step 2a</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget dui ut justo auctor semper a ullamcorper justo. Morbi placerat tortor tortor, ac dignissim leo semper ac. Donec non metus sit amet neque eleifend rhoncus vitae id dolor. Etiam
vestibulum lobortis sem semper laoreet. Vestibulum egestas elit sed lacus egestas, placerat congue erat faucibus. Nunc ac dui auctor, fermentum turpis ac, mattis magna. Nulla pellentesque, ligula vel faucibus imperdiet, arcu ligula ornare quam,
et blandit risus sem sit amet neque. Curabitur commodo dui et metus suscipit, ut dignissim risus hendrerit. Quisque at odio nec risus condimentum ullamcorper. Nulla sit amet felis sit amet neque aliquet auctor sed nec metus. Sed gravida mattis
sem, nec finibus diam suscipit sit amet.</p>
</div>
<div class="two-b">
<h3>Step 2b</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget dui ut justo auctor semper a ullamcorper justo. Morbi placerat tortor tortor, ac dignissim leo semper ac. Donec non metus sit amet neque eleifend rhoncus vitae id dolor. Etiam
vestibulum lobortis sem semper laoreet. Vestibulum egestas elit sed lacus egestas, placerat congue erat faucibus. Nunc ac dui auctor, fermentum turpis ac, mattis magna. Nulla pellentesque, ligula vel faucibus imperdiet, arcu ligula ornare quam,
et blandit risus sem sit amet neque. Curabitur commodo dui et metus suscipit, ut dignissim risus hendrerit. Quisque at odio nec risus condimentum ullamcorper. Nulla sit amet felis sit amet neque aliquet auctor sed nec metus. Sed gravida mattis
sem, nec finibus diam suscipit sit amet.</p>
</div>
</div>
<div class="three col">
<h3>Step 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget dui ut justo auctor semper a ullamcorper justo. Morbi placerat tortor tortor, ac dignissim leo semper ac. Donec non metus sit amet neque eleifend rhoncus vitae id dolor. Etiam vestibulum
lobortis sem semper laoreet. Vestibulum egestas elit sed lacus egestas, placerat congue erat faucibus. Nunc ac dui auctor, fermentum turpis ac, mattis magna. Nulla pellentesque, ligula vel faucibus imperdiet, arcu ligula ornare quam, et blandit
risus sem sit amet neque. Curabitur commodo dui et metus suscipit, ut dignissim risus hendrerit. Quisque at odio nec risus condimentum ullamcorper. Nulla sit amet felis sit amet neque aliquet auctor sed nec metus. Sed gravida mattis sem, nec finibus
diam suscipit sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget dui ut justo auctor semper a ullamcorper justo. Morbi placerat tortor tortor, ac dignissim leo semper ac. Donec non metus sit amet neque eleifend rhoncus vitae id dolor. Etiam vestibulum
lobortis sem semper laoreet. Vestibulum egestas elit sed lacus egestas, placerat congue erat faucibus. Nunc ac dui auctor, fermentum turpis ac, mattis magna. Nulla pellentesque, ligula vel faucibus imperdiet, arcu ligula ornare quam, et blandit
risus sem sit amet neque. Curabitur commodo dui et metus suscipit, ut dignissim risus hendrerit. Quisque at odio nec risus condimentum ullamcorper. Nulla sit amet felis sit amet neque aliquet auctor sed nec metus. Sed gravida mattis sem, nec finibus
diam suscipit sit amet.</p>
</div>
</div>
https://codepen.io/cian-w/pen/EQZmRz
You have a rule limiting the width of flex items:
.col {
max-width: 400px;
}
Therefore, the items cannot fill the full width of the container because they cannot expand beyond 400px. Try this instead:
.col {
flex: 1 0 400px;
}
This shorthand declaration breaks down to:
flex-grow: 1
flex-shrink: 0
flex-basis: 400px
revised codepen
This question already has answers here:
Position Absolute + Scrolling
(7 answers)
Closed 6 years ago.
I need a position: absolute element to fill its parent, even if the latter is scrollable.
I made a codepen for it.
As you can see the red overlay fills the div, but just as long as it doesn't get scrolled. Is there a way to fully overlay it even when scrolled?
you need a buffer in between content and scrolling container:
.container {
background-color: #e0e0e0;
margin: 20px;
padding: 20px;
position: relative;
max-height: 150px;
overflow: scroll;
}
.buffer {
min-height:100%;
position:relative;
}
.buffer:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
background-color: rgba(255,0,0,0.5);
/*pointer-events:none; if you want links and forms reachable */
}
<div class="container">
<div class="buffer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet tincidunt turpis, in pharetra mi convallis ut. Vivamus eget sodales nibh, eu placerat erat. Vivamus massa urna, volutpat non tempus eget, placerat quis elit. Nullam pretium id
arcu sed eleifend. Phasellus sollicitudin quis ante nec ornare. Maecenas nibh eros, vehicula vel eros eget, viverra semper nisi. Nulla facilisi. Praesent pretium porttitor arcu, sit amet consequat neque luctus non. Cras sodales, justo quis tempus
dignissim, diam est commodo orci, eget accumsan sem ante vitae sem. Curabitur quam ipsum, porta id sapien in, consectetur auctor nibh. Vivamus egestas ante vel cursus aliquet. In non ante nec velit tempus lacinia nec sollicitudin ex. Phasellus semper
lorem a diam scelerisque, sed accumsan erat molestie. Mauris vulputate lacinia erat. Nunc urna risus, facilisis at posuere in, pulvinar quis odio. Maecenas et sollicitudin arcu. Padders Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
aliquet tincidunt turpis, in pharetra mi convallis ut. Vivamus eget sodales nibh, eu placerat erat. Vivamus massa urna, volutpat non tempus eget, placerat quis elit. Nullam pretium id arcu sed eleifend. Phasellus sollicitudin quis ante nec ornare.
Maecenas nibh eros, vehicula vel eros eget, viverra semper nisi. Nulla facilisi. Praesent pretium porttitor arcu, sit amet consequat neque luctus non. Cras sodales, justo quis tempus dignissim, diam est commodo orci, eget accumsan sem ante vitae sem.
Curabitur quam ipsum, porta id sapien in, consectetur auctor nibh. Vivamus egestas ante vel cursus aliquet. In non ante nec velit tempus lacinia nec sollicitudin ex. Phasellus semper lorem a diam scelerisque, sed accumsan erat molestie. Mauris vulputate
lacinia erat. Nunc urna risus, facilisis at posuere in, pulvinar quis odio. Maecenas et sollicitudin arcu. Padders Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet tincidunt turpis, in pharetra mi convallis ut. Vivamus eget
sodales nibh, eu placerat erat. Vivamus massa urna, volutpat non tempus eget, placerat quis elit. Nullam pretium id arcu sed eleifend. Phasellus sollicitudin quis ante nec ornare. Maecenas nibh eros, vehicula vel eros eget, viverra semper nisi. Nulla
facilisi. Praesent pretium porttitor arcu, sit amet consequat neque luctus non. Cras sodales, justo quis tempus dignissim, diam est commodo orci, eget accumsan sem ante vitae sem. Curabitur quam ipsum, porta id sapien in, consectetur auctor nibh.
Vivamus egestas ante vel cursus aliquet. In non ante nec velit tempus lacinia nec sollicitudin ex. Phasellus semper lorem a diam scelerisque, sed accumsan erat molestie. Mauris vulputate lacinia erat. Nunc urna risus, facilisis at posuere in, pulvinar
quis odio. Maecenas et sollicitudin arcu.
</div>
</div>
How to avoid content from a child div overflowing the parent container? This is probably one of the most frequent question ever asked and the most frequent and a working solution is to use max-height:100%, which ofcourse works.
The problem is when I cannot use 100%, for example, in the given jsfiddle, I have an header which takes some x pixel height. I can of course arbitrarily decrease the percentage but it is unstable when the window is resized.
JSFiddle - FUpsA
Edit:
I like to mention that the Header should not be a part of the scrolling content, hence using overflow:auto on the parent div is not an option.
According your reply on my comment i suggest to use css calc:
html
<div style="width:300px; height:300px; margin-left:auto; margin-right:auto;border:2px solid #000;">
<div>
<h2>Some Header</h2>
</div>
<div id="mainTextCont" style="overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique. Donec feugiat interdum justo, eu volutpat leo lacinia hendrerit. Donec consequat risus ac leo molestie venenatis. Nulla eleifend lobortis tincidunt. Duis lobortis, ligula ac bibendum tempor, eros neque dignissim leo, nec aliquet turpis turpis eget lectus. Maecenas convallis velit ac nunc euismod, vel cursus orci tincidunt. Aenean convallis fermentum porttitor. Phasellus nunc mauris, tincidunt in aliquet quis, tempor in lectus. Vestibulum faucibus velit ultrices, fringilla nunc sed, aliquet tellus. Vivamus id turpis sed nibh sagittis dictum. Morbi ut eros consectetur, fermentum mauris eget, porttitor metus. Praesent ut magna rutrum, eleifend nulla in, vehicula libero.
Integer accumsan, tellus sit amet tincidunt semper, sem purus convallis mauris, a accumsan ante lacus vel leo. Suspendisse suscipit sollicitudin velit ut sodales. Aenean id nisl tellus. Morbi sagittis tincidunt elementum. Fusce consectetur consectetur metus ut tempor. Fusce fermentum dui tortor, sit amet fringilla ligula venenatis id. Nulla facilisi. Fusce eu felis justo. Sed vel ultrices massa. In tincidunt auctor posuere. Morbi tristique orci dolor, sit amet aliquet dui tincidunt sit amet. Sed posuere metus quis est tincidunt, quis euismod arcu vestibulum. Sed vestibulum in lacus vel hendrerit.
Etiam ultrices, ante in tempus dictum, nisl dui ultrices felis, et pellentesque arcu nisi sed justo. In sollicitudin, nibh et malesuada elementum, augue metus euismod quam, ut sollicitudin nulla turpis vel mauris. Phasellus ut dapibus enim. Donec tempus orci nec est aliquam, non scelerisque nibh pharetra. Cras scelerisque elementum libero, a faucibus turpis congue consectetur. Aliquam non est non elit luctus tincidunt sed sed orci. Suspendisse mollis ante arcu. Maecenas molestie erat mauris, sed egestas sapien malesuada nec. Quisque et ante id nunc scelerisque egestas.
Etiam vitae leo vitae turpis commodo semper vel ut justo. Curabitur aliquet iaculis lacus, vel pellentesque eros cursus in. Donec eget dui viverra, convallis libero vel, blandit dolor. Sed vulputate diam quis lacus tincidunt ullamcorper. Proin viverra ligula sem. Nulla tempus felis enim, a scelerisque dui rhoncus lacinia. Ut iaculis auctor faucibus. Phasellus purus lectus, tempor vel tellus sit amet, varius consequat lorem. Donec eget consectetur nunc. Vestibulum vulputate euismod dictum.
Nullam nec nisi non nunc feugiat gravida. Sed tincidunt mi eleifend, posuere lacus commodo, adipiscing arcu. Proin pharetra augue vitae elit mollis, eu porta turpis pellentesque. Nulla facilisi. Nam feugiat id ante dapibus tincidunt. Quisque scelerisque imperdiet commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit sapien, tincidunt non consectetur in, pellentesque nec justo.
</div>
</div>
css
#mainTextCont{
height: calc(100% - 75px);
}
fiddle
Please add overflow:hidden; to your parent div and for child div set height less than parent div ie height:210px
<div style="width:300px; height:300px; margin-left:auto; margin-right:auto;border:2px solid #000; overflow:hidden;">
<div>
<h2>Some Header</h2>
</div>
<div style="overflow:auto; height:210px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique. Donec feugiat interdum justo, eu volutpat leo lacinia hendrerit. Donec consequat risus ac leo molestie venenatis. Nulla eleifend lobortis tincidunt. Duis lobortis, ligula ac bibendum tempor, eros neque dignissim leo, nec aliquet turpis turpis eget lectus. Maecenas convallis velit ac nunc euismod, vel cursus orci tincidunt. Aenean convallis fermentum porttitor. Phasellus nunc mauris, tincidunt in aliquet quis, tempor in lectus. Vestibulum faucibus velit ultrices, fringilla nunc sed, aliquet tellus. Vivamus id turpis sed nibh sagittis dictum. Morbi ut eros consectetur, fermentum mauris eget, porttitor metus. Praesent ut magna rutrum, eleifend nulla in, vehicula libero.
Integer accumsan, tellus sit amet tincidunt semper, sem purus convallis mauris, a accumsan ante lacus vel leo. Suspendisse suscipit sollicitudin velit ut sodales. Aenean id nisl tellus. Morbi sagittis tincidunt elementum. Fusce consectetur consectetur metus ut tempor. Fusce fermentum dui tortor, sit amet fringilla ligula venenatis id. Nulla facilisi. Fusce eu felis justo. Sed vel ultrices massa. In tincidunt auctor posuere. Morbi tristique orci dolor, sit amet aliquet dui tincidunt sit amet. Sed posuere metus quis est tincidunt, quis euismod arcu vestibulum. Sed vestibulum in lacus vel hendrerit.
Etiam ultrices, ante in tempus dictum, nisl dui ultrices felis, et pellentesque arcu nisi sed justo. In sollicitudin, nibh et malesuada elementum, augue metus euismod quam, ut sollicitudin nulla turpis vel mauris. Phasellus ut dapibus enim. Donec tempus orci nec est aliquam, non scelerisque nibh pharetra. Cras scelerisque elementum libero, a faucibus turpis congue consectetur. Aliquam non est non elit luctus tincidunt sed sed orci. Suspendisse mollis ante arcu. Maecenas molestie erat mauris, sed egestas sapien malesuada nec. Quisque et ante id nunc scelerisque egestas.
Etiam vitae leo vitae turpis commodo semper vel ut justo. Curabitur aliquet iaculis lacus, vel pellentesque eros cursus in. Donec eget dui viverra, convallis libero vel, blandit dolor. Sed vulputate diam quis lacus tincidunt ullamcorper. Proin viverra ligula sem. Nulla tempus felis enim, a scelerisque dui rhoncus lacinia. Ut iaculis auctor faucibus. Phasellus purus lectus, tempor vel tellus sit amet, varius consequat lorem. Donec eget consectetur nunc. Vestibulum vulputate euismod dictum.
Nullam nec nisi non nunc feugiat gravida. Sed tincidunt mi eleifend, posuere lacus commodo, adipiscing arcu. Proin pharetra augue vitae elit mollis, eu porta turpis pellentesque. Nulla facilisi. Nam feugiat id ante dapibus tincidunt. Quisque scelerisque imperdiet commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit sapien, tincidunt non consectetur in, pellentesque nec justo.
</div>
</div>
Overflow is for the parent and describes how to wrap the child contents.
<div style="width:300px; height:300px; margin-left:auto; margin-right:auto;border:2px solid #000;overflow:auto;">
<div>
<h2>Some Header</h2>
</div>
<div style="overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum...
</div>
</div>
Updated Answer:
add overflow:hidden; in parent div sorry I did not notice that you don't want to change height.. now its as per your requirement.
Like this:
<div style="width:300px;overflow:hidden; height:300px; margin-left:auto; margin-right:auto;border:2px solid #000;">
<div>
<h2>Some Header</h2>
</div>
<div style="overflow:auto; max-height:100%">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique.
</div>
</div>
One of my colleagues came up with a very interesting solution and I was simply amazed! The solution is compatible with IE 5.5+ and its purely CSS.
He used the property of containers with postion:relative which modifies the scope of their child elements with position:absolute. more information about that at css-tricks
This is a sample structure of the solution, refer the fiddle for more details
<div id='parent' style='position:relative'>
<div id='header' style='height:75px'>
<!-- Header -->
</div>
<div id='child' style='position:absolute; top:75px;bottom:0px; overflow:auto'>
<!-- Content-->
</div>
</div>
Note that the height is set only for the static content and not for the dynamic content
JSFiddle - FUpsA - Solution
The problem is that the header takes up space. When you combine the headers height with 100% of the parent (percentages are based on the parent element) it is going to be over 100% of course.
What you should do is make the headers height one percentage and the text part other percentage.
For example:
<div style="width:300px; height:300px; margin-left:auto; margin-right:auto;border:2px solid #000;">
<div style="height: 20%;">
<h2>Some Header</h2>
</div>
<div style="overflow:auto; max-height:70%">
...
</div>
</div>