I've been trying to add a scrollbar to my page when a fixed element (main in the example below) is higher than the viewport. This is problematic in mobile as it doesn't show the entire element
I've tried to add overflow-y: scroll to the element itself, the wrapper, the body etc. with no results.
section {
background-color: lightblue;
width: 100%;
height: 100%;
}
header {
height: 60px;
}
main {
position: fixed;
top: 50px;
border: 3px solid blue;
background-color: tomato;
height: 400px;
width: 400px;
}
<section>
<header>
Header
</header>
<main>
Main - When this element overflows the viewport, I cant see the rest
</main>
</section>
I fixed by adding a wrapper containing the fixed and overflow properties as well as a height of 80% so I can scroll all the way down
section {
background-color: lightblue;
width: 100%;
height: 100%;
}
header {
height: 60px;
}
.mainWrapper{
overflow: auto;
position: fixed;
top: 40px;
height: 80%;
}
main {
border: 3px solid blue;
background-color: tomato;
width: 400px;
}
<section>
<header>
Header
</header>
<div class="mainWrapper">
<main>
Main - When this element overflows the viewport, I cant see the rest
Main - When this element overflows the viewport, I cant see the rest
Main - When this element overflows the viewport, I cant see the rest
Main - When this element overflows the viewport, I cant see the rest
Main - When this element overflows the viewport, I cant see the rest
Main - When this element overflows the viewport, I cant see the rest
Main - When this element overflows the viewport, I cant see the rest
</main>
</div>
</section>
Related
I have tried a lot of things and searched online but I cannot figure out the solution to this problem.
I have a div container which has a max-height, min-height and also overflow: auto. When the inner content is larger than the max-height, a scrollbar appears as expected. But, inside the content there is a dropdown, which when clicked, the menu expands, and instead of being displayed outside the parent container, it is like changing the inner content height.
The only solution I found online and made sense to me, is to wrap the container to div with relative positioning and make the dropdown absolute, but there is a big drawback now, the dropdown stays fixed on scroll, as it is absolute positioned relative to the wrapper and not the content. Is there any common way to fix this or any other solution ?
I didn't post any code because I do not want the answer to rely on my code.
I just want a minimal example if possible with these properties:
Container has a max-height
If content is larger than the container's max-height then the container should display a scrollbar.
The content has a dropdown which should scroll with every other element of the content.
The menu options of the dropdown element are escaping the container / are displayed outside the boundaries of the container.
To illustrate on my comments on the question, here's an MCVE:
.scroll-container {
border: 3px dashed #eee;
height: 400px;
padding: 10px;
overflow: auto;
width: 400px;
}
.content {
background-color: #f0f0f0;
height: 600px;
position: relative;
}
.dropdown {
background-color: orange;
position: absolute;
height: 300px;
width: 300px;
left: 300px;
}
<div class="scroll-container">
<div class="content">
<div class="dropdown"></div>
</div>
</div>
As you can see, with absolute positioning based on the relative position of div.content the orange div.dropdown creates a horizontal overflow, which is what you don't want. To fix this scenario, you need to remove position: relative from div.content and use transform: translateX(300px); instead of left: 300px;:
.scroll-container {
border: 3px dashed #eee;
height: 400px;
padding: 10px;
overflow: auto;
width: 400px;
}
.content {
background-color: #f0f0f0;
height: 600px;
}
.dropdown {
background-color: orange;
position: absolute;
height: 300px;
width: 300px;
transform: translateX(300px);
}
<div class="scroll-container">
<div class="content">
<div class="dropdown"></div>
</div>
</div>
I am very new to HTML, CSS and angular.
I am trying to create an angular app and where I have three main div on the screen
1. header
2. content
3. footer
The idea is page should be fixed and cannot be scroll.
Header and footer always stick to top and bottom.
the middle part is content which is scroll-able only.
contents should not be overlapped by header and footer.
Layout should work with different type of devices and screen.
Here is the fiddle for the same but it is overlapping conents.
JS Fiddle
I achieve it with fixed size of screen but not with different size.
here is my another code...
html {
height: 100%;
overflow: hidden;
}
body {
min-height: 100%;
}
<body>
<app-root class="h-100 w-100 align-items-center"></app-root>
</body>
.headerdiv {
margin-top: 0px;
height: 60px;
min-height: 60px;
}
.contentdiv {
position: relative;
overflow: scroll;
min-height: 91%;
}
.footerdiv {
position: relative;
overflow: hidden;
margin-bottom: 0px;
padding-bottom: 0px;
height: 20px;
min-height: 20px;
width: 100%;
background-color: darkblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="headerdiv">
<app-hsbc-header-bar></app-hsbc-header-bar>
</div>
<div class="contentdiv">
<div>
<router-outlet></router-outlet>
</div>
</div>
<footer class="footerdiv">
<app-application-footer></app-application-footer>
</footer>
Can anyone help me with this.
What you need in the main content div is to give it the dynamic height using pattern like this:
height : calc( 100vh - (headerHeight + footerHeight))
So it height scale with the view height of the browser, and give it overlow-y:auto then when the content exceed it height it become srollable :
nav{
height:20vh;
/*Or fixed pixel unit*/
background-color: green;
}
footer{
height:20vh;
/*Or fixed pixel unit*/
background-color: black;
}
section {
height: calc(80vh);
/* - Height: calc(100vh - (navheight + footer))
- Over flow y make the dive scrollable
when it exceed the fixed height*/
overflow-y: auto;
transition: all 0.5s;
background-color: yellow;
}
<nav></nav>
<section>
Main content will be scrollable if it contain exceed the fixed height
</section>
<footer></footer>
You may also like to try Bootstrap Navbar. It provides all required css styles.
Is it possible to prevent an element from scrolling away horizontally, but allow it to scroll vertically with the rest of the page content? It's a little hard to describe, so let me show an example:
HTML:
<nav>Side Nav</nav>
<header>Header</header>
<main>
<h1>Main Content</h1>
<div class="wideContainer">
Some wide and tall container
</div>
</main>
CSS:
nav {
position: fixed;
width: 150px;
height: 100vh;
}
header {
height: 100px;
padding-left: 150px;
}
main {
padding-left: 150px;
}
.wideContainer {
width: 2000px;
height: 1000px;
}
https://jsfiddle.net/hg2zmu1o/7/
As you can see, the left column is fixed. The header scrolls away when you scroll vertically. This is correct. But when there is some wide content in the main region, it makes a horizontal page scroll (which is fine). However, when scrolling horizontally, the header also moves behind the side nav column.
How can I make it stay horizontally?
I tried using position:sticky but without success.
position: sticky;
left: 150px;
Keep in mind, I don't want to do position:fixed on the whole header, because then it wouldn't scroll vertically with the rest of the page.
The jsfiddle illustrates the problem.
EDIT:
Found this example that demonstrates the behavior I'm after. It uses JS though, which I was hoping to avoid.
$(window).scroll(function(){
$('#header').css({
'left': $(this).scrollLeft() + 15
//Why this 15, because in the CSS, we have set left 15, so as we scroll, we would want this to remain at 15px left
});
});
If anyone knows how to achieve it with pure CSS let me know. Otherwise I may go with this in the meantime.
Just add overflow-x to your CSS.
body {
padding: 0;
margin: 0;
overflow-x:hidden;
}
nav {
position: fixed;
width: 150px;
background-color: gray;
height: 100vh;
}
header {
height: 100px;
background-color: silver;
padding-left: 150px;
}
main {
padding-left: 150px;
}
.wideContainer {
width: 100%;
height: 1000px;
background-color: turquoise;
}
<nav>Side Nav</nav>
<header>Header</header>
<main>
<h1>Main Content</h1>
<div class="wideContainer">
Some wide and tall container
</div>
</main>
Is this what you've been looking for?
I also made this and this.
Hope it helps!
So lets imagine I have 6 div elements with different content.
3 divs are header
1 div is main container (scrollable)
last 2 divs are footer
How to make all of this scallable just with pure css? Because now when I'm resizing my browser my footer divs are just disappearing and I can't reach them and when I make my browser even smaller my main container div is cut in half (lower part disappears) and header divs height gets smaller
The best scenario would be to make header and footer divs somehow fixed height(don't know how) and main container to resize on broswer is resized.
html
<div ng-controller="ListController">
<div class="header">
</div>
<div class="price_found">
</div>
<div class="settings">
</div>
<div class="main_container antiscroll-wrap">
<div class="container antiscroll-inner">
</div>
</div>
<div class="total_select">
</div>
<div class="menu_footer">
</div>
</div>
scss
.cheap-watcher { //this is main container properties in which everything is injected
position: fixed;
top: 0px;
right: 0px;
width: 360px;
height: 100%;
max-width: 360px;
max-height: 100%;
min-height: 100%;
background-color: #f1f3f4;
float: right;
.header {
height: 7.57%;
background-color: #00a8e8;
}
.price_found {
padding-top: 16px;
height: 10.169%;
background-color: #fff;
text-align: center;
}
.settings {
height: 4.971%;
width: 100%;
display: inline-block;
}
.main_container {
width: 360px;
background-color: #fff;
.container {
width: 360px;
height: 57.856%;
}
}
.total_select {
height: 7.57%;
width: 100%;
background-color: #fff;
text-align: center;
border-top: solid;
border-top-color: #e8e8e8;
border-top-width: 2px;
}
.menu_footer {
height: 11.864%;
width: 100%;
}
}
You can assign to all of your containers a min-height for example in px or vh. Min. Height means that the container will always have that minimum height but will grow as more content comes in. For your main container you obviously want a fixed height, so use normal height and use also px or vh and overflow so if you have more content then the height allows, the main container becomes scrollable.
See a working Fiddle
Hope this helps you a bit.
This question has been asked an awful lot of times here, but I am yet to find a conclusive answer to this.
I'm working to implement right and left 100% height, fixed sidebars in my design. The Left sidebar works great, but the right one floats over the (min-width'd) content when the browser is resized.
When I set the position of the bars to absolute, it behaves well with horizontal window resizing, but then the sidebars aren't fixed on vertical scroll.
Check out my jsfiddle: http://jsfiddle.net/wjhzyt0u/17/
(If you resize the window, you can see the right blue bar float over the middle grey content).
HTML
<div class="wrapper">
<section id="sidebar-nav">
</section>
<section id="content">
<p>some rad stylin' content</p>
</section>
<section id="sidebar-notif">
</section>
</div>
CSS
html, body {
position: relative;
width: 100%;
height: 100%;
}
.wrapper {
position: absolute;
height: 100%;
width: 100%;
min-width: 450px; /* dont want to squish the content too much */
}
#sidebar-nav, #sidebar-notif {
position: fixed;
height: 100%;
width: 150px;
background: lightblue;
}
#sidebar-nav {
top: 0;
left: 0;
}
#sidebar-notif {
top: 0;
right: 0;
}
#content {
margin: 0 150px;
height: 300px;
background: lightgrey;
border: 2px solid yellow;
}
Any help would be very welcome!!
My 'solution' for anyone else looking at a similar situation.
I ended up going with absolutely positioned sidebars (which scale to the size of the middle content), and added the Waypoint sticky plugin to scroll the sidebar content.
Updated JsFiddle: http://jsfiddle.net/wjhzyt0u/20/
Sticky divs stick to the top of the page on scroll - thus creating the illusion of 100% height sidebars.
Drawbacks are extra js weight + page load times.. but I'll take it for now.
Changes:
.wrapper {
position: absolute;
width: 100%;
min-width: 500px;
// removed 100% min-height, which lets the sidebars stretch to 100% height of the content.
}
#sidebar-nav, #sidebar-notif {
position: absolute; // changed to absolute from fixed.
height: 100%;
width: 150px;
background: lightblue;
}
// added sticky divs to sidebars, which stick to the top of the page on scroll (with help from Waypoints sticky plugin.
.sticky {
border: 1px solid red;
}