I am using bootstrap i have requirement where user is asking to make layout 100% height and width that should cover all the space on the page. I tried bootstrap class .container-fluid but its not working. Any idea what i am doing wrong in below code ?
index.html
<div id="main-content" style="padding-bottom: 3rem;" ng-if="user">
<div class="container-fluid">
<breadcrumbs></breadcrumbs>
<div ui-view></div>
</div>
</div>
aftab Have a look at this Fiddle.
You can make a class and use vh and vw (height/width).
You will see the block class takes 50px away from the overall view port height for the height of the navbar.
.block {
height: calc(100vh - 50px); /* less 50px for the height of the Navbar */
width: 100vw;
background-color: darkorange;
}
Notice this fills the whole screen with no scroll bars.
See if this helps you here.
Just have a read of this for browser support.
Related
I've a sidebar which is positioned sticky but in some cases larger than the height of the screen.
If the sidebar is in fact larger as the screen height, I don't want it to stick on the top. It should scroll down with the content of the page.
I'm using Bootstraps sticky-top class for that.
It has the following attributes:
.sticky-top {
position: sticky;
top: 0;
z-index: 1020;
}
I changed the top: 0 to top: 50px in my case because I need the space above.
Here's some example code: https://codepen.io/cray_code/pen/ZEaOXwo
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="toc sticky-top">
<nav class="list-group">
Links (see example)
</nav>
</div>
</div>
<div class="col-lg-9">
Content (see example)
</div>
</div>
</div>
I tried the solution from here and added the following code to my class:
.toc {
overflow-y: auto;
max-height: 100vh;
}
But that doesn't help.
Is there a pure CSS solution for that or do I need to use JavaScript?
Not sure if this is what you want, but maybe using the calc() in your css could help you.
.toc{
overflow-y: auto;
max-height: calc(100vh - 50px);
}
Hope this pen helps
Some explanations:
in js we use .offsetHeight&.clientHeight to get height we check weather this height(493px) + 50px offset is more than screen height or not.
When screen size is small we set position to static
Also we set margin-top: 50px instead of top: 50px
because top works only for sticky and margin-top works for static
For aside blocks that higher then window height you can use smartSticky script
Just add "data-smartsticky" atribute to your aside block
https://www.npmjs.com/package/smartsticker
Parent block of sticky block must be height 100%, or for flex - flex-grow:1
I want my background to be full screen with 100vh but i also want it that if I minimize the screen vertically that the background stays at the end of the picture that is on the background
header{background: #efe0d9; display: inline-block;width: 100%; float: left; height:100vh;padding: 1% 0 0;}
I want to have a background that ends at the bottom of the screen becase then the picture that is on the screen is big enough but when I minimize the screen vertically the pictures stay the same size (as wanted) but the background also goes up so the pictures are overlapping with next part of the websiteenter image description here
Have you tried setting min-height?
Edit: This may not be exactly what you're looking for, since I had to add an extra element, But you could try wrapping the <header> in a container with its height set to 100vh, making the header's contents take up the minimum height you want to cover, and giving the same background color to the wrapper and the header.
Check the snippet and toggle to full screen to see the background expand beyond the header's contents.
#container {
background: #efe0d9;
height: 100vh;
}
header {
background: #efe0d9;
width: 100%;
}
.stack {
height: 100px;
text-align: center;
}
body, p, hr {
margin: 0;
}
<div id="container">
<header>
<div class="stack"><hr><p>0px</p></div>
<div class="stack"><hr><p>100px</p></div>
<div class="stack"><hr><p>200px</p></div>
<div class="stack"><hr><p>300px</p></div>
<div class="stack"><hr><p>400px</p></div>
<div class="stack"><hr><p>500px</p></div>
</header>
</div>
Edit: Adding a container div with its height set to 100vh and display set to flex, and giving the header a min-height seems to have done the trick. Here's an updated fiddle.
I have a page with following html markup:
<html>
<head>...</head>
<body>
<div class="container">
<header>...</header>
<div class="wrapper">
<div class="row">
<div class="col-md-8">...</div>
<div class="col-md-3 col-md-offset-1 col-aside">
<aside>...</aside>
</div>
</div>
</div>
</div>
</body>
</html>
I set 100% height for:
html, body, body > .container {
height: 100%;
}
.wrapper {
min-height: 100%;
}
.wrapper > .row {
min-height: 100%;
}
.col-aside {
min-height: 100%;
}
So I want that both my columns have minimum height of 100%. While inspecting my page with chrome developer tools I realized that .row and .col-aside don't get 100% height. I am a little bit lost because I saw answers dealing with display: table but I'm pretty sure it's not necessary since I managed to do this layout without bootstrap using just divs and their heights.
So have to stretch columns so that they have min-height: 100% preferably without using display: table and position: absolute?
updated: jsfiddle http://jsfiddle.net/U6H6W/ . Something like that, here you can see that .row doesn't get 100% height in spite of the fact that .wrapper gets 100%
A better solution would be to use viewport height, e.g.:
.col-aside {
height: 100vh;
}
You can easily specify the height of one div, without having to specify the height of the higher level HTML blocks.
Viewport is supported in all modern browsers, and as far back as IE9. IE8 does not support viewport, but if you need legacy support going back that far you can set a fallback to height: 100% (making sure you cover all of the containing blocks.)
Here is a jsbin to demonstrate:
http://jsbin.com/zeyuraka/1/edit
When dealing with heigth:100%, all the parents should be in height:100%. If one isn't, then no child is.
The 100% approach is complicated, especially when it comes to many childs with padding or margins. It could not display what you expect (i.e. exceed screen size).
You could try position: fixed, with bottom:0, but you will have to handle the position of the non-fixed div.
I've just started building a website using bootstrap - non responsive template, and observed that my full width div (one with blue background) not stretching to full browser width when viewed resizing the browser window. Even though I added width: 100%; its making no difference. Please see attached the screngrab.
Also if I removed the 'navbar-fixed-top' class from main navigation, then navigation background also starts behaving in the same manner. Can anyone let me know whats going wrong here.
Note: The same thing happening in bootstrap template too if I add a full width div to any div block with container class.
Update
here is the snippet of html code:
<div class="sub-header"> <!--div with blue background-->
<div class="container">
<div class="row">
<div class="col-md-12">
------inner content -----
</div>
</div>
</div>
and CSS code:
.sub-header { background: #0094e0; height: 80px; border-top: 1px solid #0082c5; border-bottom: 1px solid #0082c5; }
I have a layout with a 100% height for the content area. The problem is that it makes an iframe work perfectly for 100% height, but I cannot get it to work for a regular div. Is there a way to make the height 100% for the div? The white area should be filled with a black area but it does not. Any help would be greatly appreciated.
http://jsfiddle.net/mp8nr/1/
It would work if you set the height of .inner-content to 100% too:
.inner-content {
margin-bottom: -109px;
padding-top: 109px;
height: 100%;
}
Set your inner-content class to
height: 100%;
Using position:absolute
http://jsfiddle.net/adrianjmartin/mp8nr/27/
You have to set the parent element height also:
<section role="main" id="content">
<div class="inner-content" style="height: 100%">
(This should of course go in the style sheet somehow... You use the class for other elements in the page, that's why I didn't put it there...)