So I'm using Angular 2 to build my personal website. I have a header at the top of the page that contains navigation buttons just like Youtube's Home, Trending, and Subscriptions buttons on their navbar.
However, I don't really like how the scrollbar extends to the very top of the page where it's side by side with the header. I want my scrollbar to start from the bottom of the header and extend to the bottom of the page.
This is what the default appearance looks like:
Notice how the scroll bar is side-by-side with the header. I don't like how that looks.
This is what I'm going for:
Notice how the scroll bar is underneath the header. However, the component extends and doesn't stop at the bottom of the page. As a result I can't even scroll. I can fix this by setting the height of the component to some pixel value but it doesn't work if I use %.
TL;DR:
How do I set the height of a component as a percentage or calc(somepercent% - somenumberpx);
The code for this project is here:
https://github.com/piusnyakoojo/personal-website
You can get the window height by javascript window.innerHeight.
You also have to recalculate the window height on window.onresize event, and re-set the contents div height.
To fix this I changed the height of the component's body to 100vh to make the height 100% of the window height.
So for example, let's say the Component that's loaded in the
<router-outlet></router-outlet>
has a template that looks like this:
<div class="body">
//.. some content
</div>
Place this in the style sheet:
.body {
height: 100vh;
}
For my particular situation, I had to adjust this since the header is about 50px of the total height of the window. So I have:
.body {
height: calc(100vh - 50px);
}
Read more about how you can use vh here: Make div 100% height of browser window
Related
I am creating an Angular application with Bootstrap and i stumbled on a problem. I am trying to size one of my divs in the page where the height is fullscreen, however i have a navigation bar and one other element above this div (i am also using padding from the above element). I want my div to be exactly right height to fit from the last element to the bottom of the page.
Now the problem is, when I set style of my div to 100vh the site doesn't fit and i get a slider to scroll through the whole page. Is this because vh doesn't take the navigation and the other element into account and just set my div to default screen size? And how to correctly repair this problem that it will work the same across any screen?
There are several approaches to get your div the height you're looking for.
Use the calc css function. It should be something like this:
div {
height: calc(100vh - 60px);
}
Replace the 60px with the pixel size of your navigation element.
[Alternate solution] Use flexbox css styles. You'll need to use a column flexbox setup and flex: 1 on the element you'd like to take up the remaining height.
You can have a container div of 100vh. And inside it your nav bar will be sticky-top in a child div. And your other child div is the parent of your content.
I'm trying to set a scrollable content with overflow-y: scroll css style in a md-tab but it's not working The scrollbar is displayed but it's not activated
I enabled it with fixing a height but I want it to fit the content height dynamically
how can I solve this issue ?
I am guessing you are trying to keep the tab header out of the scrollable area and make the tab content scrollable only. If that's the case you can set height of tab content with vh. That will keep the tab labels in view and make the height dynamic and content scrollable.
css:
>>> .mat-tab-body-content {
height: 90vh !important;
}
demo
If this is not what you are looking for, please explain the question little bit further or add some code.
For my forms that are within a modal, I've opted to use the bootstrap modal footers to display any errors related to the form. This is causing some frustrations when the errors inevitably make the footer take up more height than the footer has available. I'm fine with it needing more height, but I want it to add the height to the top and have the modal body's height reduced so the modal as a whole stays the same height. If it adds it to the bottom it ends up pushing content off the screen. The modal body accounts for content that's too "tall" and adds vertical scroll bars which is why I'm willing to give up modal-body height to accomodate the modal footer height.
I've added a link to an image of what I'm referring to. The modal footer expands to the content as expected, but adds that height to the bottom so the rest of the modal footer becomes inaccessible when its pushed off screen. I want to steal height from the body so the footer's added height gets added to the top and the modal's total height stays the same size.
I'm sure there's a simple fix I haven't found yet but I thought I'd ask while I continue to look in case someone else has already found a solution they want to share. Any help would be much appreciated. Thanks in advance.
Normally bootstrap modal uses fixed positionong. In case when content is to large scrollbars appears inside the modal.
If you want to have long modals with no scrollbars you must first change modal positioning to absolute. But if your site content is long you must add some top property value. It's because now modal is vertically positioned to whole site, not to current browser view, so % top will not work anymore.
.modal {
position: absolute;
top: 100px;
}
Now to scroll you just use browser scrollbar.
Next to get rid of modal scrollbars you add max-height: inherit to modal-body class. Now modal will get larger depending on a content without scrollbars.
.modal .modal-body {
max-height: inherit;
}
Yes this has some disadvantages. The biggest one is that if you launch modal on the bottom of the page you might not even see it because it will popup on the top of the page.
For this issue you can add js scroll top script after modal is fired.
$('#myModal').on('show', function () {
$("body").animate({
scrollTop:0
});
});
Hope that helps!
I'd like to have many elements fixed, but then have the main text block scroll.
Before I start coding, I'd just like some advice on the best way to do this. Should I wrap ALL the fixed elements together, and then inside that, have a relative element for the scrolling part?
Here is what I am trying to do:
I think you should create a main wrapper for your page which will have a relative position and that you center horizontally on your page (using margin: 0 auto; for example).
Then add inside that wrapper a <nav> for your top navigation and set its css position property to fixed, and then do the same for the sidebar with a <aside>.
Then add inside the wrapper a <div id="content"></div> for instance for your content and set its css position property to relative. If you want the content of this div to scroll vertically, you can add the following css : overflow: auto;
If I understand you well, you want your content to change without the page being reloaded & that the content scrolls, but not the rest.
You can :
Wrap your content into an iframe, so you can change the content without refreshing the whole page with a fixed height,
Just use a fixed height to your content div, and set this :
#yourDivId{
overflow:scroll;
overflow-y:none;
height: XXX px; //Fixed height;
}
Note : your mouse will have to hover the content to scroll it.
Well an advice?
Create separately three blocks; for fixed Nav, Fixed sidebar(for category) and scrolled main block(article). It'll be easy to order, I guess.
How many Category will display on the fixed sidebar? if the list heigher than window's screen, some category will be hidden unless you make it 'overflow:auto'. also consider about possibility of user resizing the screen.
Happy Coding !
I have a jQuery slider near the top of my page. But when the page first loads, it takes a few seconds for the slider to load and during that time, the divs underneath it are near the top.
Is there a way to make room immediately for the slider div so the elements below are placed properly from the start? This isn't preloading as the slider is one of the first elements on the page and I don't believe that preloading would do any good.
Here is the page in action: http://americanart.si.edu/index_newsplash3r.cfm
Thx.
You can use min-height and min-width as well as height and width on your CSS. This should force the div to be a certain height.
Apply these attributes to the CSS for the element:
height: 100px; min-height: 100px; for example.