I want a simple page where i have a main section and a left sidebar with two sections. I dont know the height of the top section, and I want to bottom section to fill out the rest of the screen. As you can see on the fiddle below (try to resize the window if you cant see the sidebar), height 100% sets the hight of the bar plus the it own height and I want it to only fill out the rest of the space. I found other questions in here where people propose to use vh minus top bar, but I dont know the hight of the top bar. Is there other options?
Notice the bottom section must support scrolling if content exeeds the screen height.
https://jsfiddle.net/segato/agprcbg0/2/
html,
body,
.wrapper,
.wrapper-inner,
.sidebar,
.main {
height: 100%;
}
You can do it with the Flexbox. The whole point is to make the #bottom div flexible so that it can take up all the remaining vertical space.
Updated Fiddle
Simply remove the defined height attributes. So:
#bot {
background-color: red;
margin: 0px !important;
padding: 0px !important;
overflow-y: hidden !important;
overflow-x: hidden;
}
html, body, .wrapper, .wrapper-inner, .sidebar {
height: 100%;
}
Updated: https://jsfiddle.net/0da8b9oj/1/
Related
Here is the photo of the border of the body
As you can see the body is not at 100% height.
Here's the CSS codes of the HTML and Body
html{
height: 100%;
min-height: 100vh;
}
body{
height: 100%;
min-height: 100vh;
font-family: sans-serif;
min-width: 400px;
position: relative;
display: flex;
justify-content: center;
border: 5px solid black;
padding: 0;
margin: 0;
}
I tried putting the height of the html and body separately but it still didn't work. I tried searching and them saying make min-height and height at 100% or 100vh and so I did but it still didn't work. I think it is because those things that are over the body are overflowing from its container?
Edit: I forgot to add this but the reason why I want body to extend along with the overflow is because that left and right container is positioned as sticky. So I can't use overflow: hidden;
I can try putting the left and right container as position: fixed; but it does not take space so I have to resize everything and also I want to know what is happening so I can avoid this problem.
Here's the whole code
https://codepen.io/n01knowz/pen/qBpBapV
I'm new to CSS so I don't know if there's any writing problem there so please tell me what I can fix.
Update: Okay so the reason the body wasn't extending was because the container is overflowing and technically isn't getting any bigger and so the body isn't expanding because its child's height isn't expanding too. So that's the danger of using when you set the height of the container.
Solution: Just let the container's height be and let the child components of the container be the one to decide its height.
Add in the overflow attribute. Which can work more than one way.
If you want no scroll bar use hidden, if you want to keep the content you can use scroll.
body {
overflow: hidden; /*any content that would overflow would be hidden and there is no scroll bar, NOTE, this will not stop the containers from overflowing. */
overflow: scroll; /* this would place scroll bar once the content overflows */
overflow: auto; /*will only add the scroll bar only after content over flows but will not add if it the content does not overflow */
}
Currently when I zoom out, all the content goes to the left or right side. But I want to keep the content centered like this page for example. Here is the website which I want to keep the content centered when I zoom out.
Here is the body and wrapper CSS:
body {
background: #0a0a0a none repeat scroll 0 0;
font: 14px/20px "Conv_Gotham-Medium",Arial,Helvetica,sans-serif;
height: 100%;
margin: 0;
min-width: 320px;
overflow-y: scroll;
}
#wrapper{
position: relative;
overflow: hidden;
}
The easiest way to keep something centered is to set margin: 0 auto and a specific width (or a max-width to keep it more dynamic). margin: 0 auto causes the horizontal margin to equally fill the remaining space while the vertical margin stays 0.
e.g. if your window width is 1280px and your #wrapper has a width of 1000px, both margin-left and margin-right will have 140px which leads to a centered wrapper
Live Example: http://codepen.io/anon/pen/QydNYo?editors=110
You seem to use the bootstrap framework.
Did you consider adding an additional class to your col-md-12, most conveniently trough jQuery with css-selectors or just plain CSS?
In your case like:
$(".webdesign-holder .col-md-12").css("max-width", value);
$(".webdesign-holder .col-md-12").css("margin", "0 auto");
OR
.webdesign-holder .col-md-12 {max-width:value;margin:0 auto}
I'm building a page that has a list on the left, and a container showing a single item's details on the right. Here is a sample image showing the page layout and the parts I want to scroll.
In both the left container and the right container, I need to scroll when the data exceeds the container's viewport height. I only want the red-highlighted containers to scroll--the outer blue container is fixed, and the yellow portion inside the blue container is fixed. Only the red containers' contents should scroll, only when applicable.
I've put up a codepen where I'm playing around with it and can share it with you (the app itself is behind firewall, codepen is the best I can do). What you'll see on the codepen is that I can get the container to scroll when I set it's height (in this case, 380px, which is loosely about how much space is there on screen). If you move the sample codepen's container up, you'll see the scroll area stays fixed (duh), and if you increase the height of the scrollable container beyond 380px, once you go below viewport, scrolling starts to go away--at around 800px or so it completely goes away.
What the heck am I missing here? The blue containers should size themselves to the bottom of the viewport, whether it's 800px high or 1600px high. Then The red container's height would fill that available height inside the blue container, and scroll if necessary.
I'm really stumped on what I'm missing here.
Edit: jQuery and javascript sizing are not options. This is achievable by CSS only, I'm just missing some property somewhere and am stumped.
Edit 2: I tried the suggested html (html: height:100%, etc). It works in codepen, but when I attempt it on my full version of the site, it doesn't work. In the screenshot here, you can see the blue high-lighted area is the scroll container in question, and the white bar on the right is the scrollbar (custom-styled background) but no actual scroll--just the bar background.
I have implemented a basic version which should help you out.
You can find the code over at https://codepen.io/hunzaboy/pen/aWmMeJ .
Here is the CSS
body,
html {
overflow: hidden;
}
.wrapper {
display: flex;
height: 100vh;
}
.sidebar {
width: 20%;
background: blue;
color: white;
overflow-y: scroll;
}
.content {
background: yellow;
color: brown;
overflow-y: scroll;
}
with css just use overflow-y:scroll and define the max height, or just height
.that-box {
overflow-y:scroll;
height: ###px;
}
--edit: and hide the scroll bar at a certain width
#media screen and (max-width: 1024px)
{
.that-box {
overflow-y:hidden; //this will cause clipping on content outside of the box
height: ###px;
}
}
--edit2: a CSS solution
html {
min-height:100%;
position:relative }
body {
height:100%}
.box {
position:fixed;
height:100%;}
The solution I like to use is through use of the view width (vw) and view height (vh) units. Using 100 respectively for each is the equivalent of your viewport's current size.
HTML
<div class="dashboard">
<div class="left-panel v-scroll">
<!-- the stuff on your left nav -->
</div>
<div class="right-panel v-scroll">
<!-- the stuff on your right nav -->
</div>
</div>
CSS
.dashboard{
width: 100vw;
}
.left-panel{
height:100vh;
width: 20%;
float:left;
margin-left: 20px;
}
.right-panel{
height:100vh;
width: 76%;
display: flex;
}
.v-scroll{
overflow: scroll;
}
This will ensure that they will scale according to how your screen size changes.
I have a footer i created for a website, but for some reason when i change the width of the window the background image seems to just disappear throughout the right side as i'm shrinking the width of the window.
The footer is supposed to stretch 100% accross the bottom of the screen and does so until i start shrinking the width of the window to a certain point.
You can see an example of my issue Here
Any ideas how to fix this? I am totally stumped. Maybe i did something wrong with width?
The width of #footer is set to auto, and the content within (#content-wrapper) has a fixed width.
This is causing the horizontal bars to appear.
To solve this, you can set overflow:hidden to the parent div (#footer).
Try this:
#footer {
background-image: url("images/footer-bg.png");
background-repeat: repeat-x;
height: 451px;
margin: auto 0;
width: 100%;
overflow: hidden; //What you're looking for.
}
If you also want the inner div (#content-wrapper) to dynamically resize itself, use a percentage, instead of a pixel dimension for width:
#footer #content-wrapper {
height: 451px;
margin: auto;
width: 83%;
}
Hi i have check to your demo page you have define your footer width 1265px and now
than your define min width your html or body as like this
body, html {
min-width: 1265px;
}
because your max width is 1265 define to your footer so that you define same width your body or html
I know this has been discussed here many times, but none of the answers I found here, seem to address my problem.
I have this variable (in height) layout, and wnat the footer to always stick to the bottom.
I have used the min-height: 100%; to the container div, and got it somehow to always be in the bottom. trouble is, it's sinking too low to the bottom.
I've put an example here:
http://jsbin.com/erono3
As you can see, my footer is at the bottom, but will go too far in the bottom, and even though there's space on the page to display it, it's creating a scroll bar.
Also, I'd like the main container to to be shown as big as the content is (i.e. closing the square), but right now, it looks like the container is going all the way to the bottom, and my footer is covering it.
What am I doing wrong there?
Thanks in advance
You should take a look at the link by Ben Lee again :). I have used that in your layout to achieve the effect you want. See it here: http://jsbin.com/erono3/2
The important thing is for the footer to be part of the container. The container has a min-height of 100%. So it occupies the whole screen always. The header is normal what ever it is inside.
Then you should have an inner container element (important), where your main content resides. In the link above, it has the id #body. This would have a padding-bottom (to give space to the footer.
The footer is absolutely positioned with a bottom:0px meaning it is always going to be at the bottom of the container (the container has to be position:relative).
EDIT (in response to the comment)
To make your footer span the entire page, but keep everything else centered, just do this:
remove the width off of the #containter, #container spans the whole page. Provide a width to the #body element in the link above and center it, using margin: 0px auto. You get the effect you wanted.
New link: http://jsbin.com/erono3/5
Here's a simplified version of this, which is worth reading for the explanation. See if you can adapt yours to fit.
CSS:
html, body, div {
margin: 0;
border: 0;
padding: 0;
}
html, body {
height: 100%;
}
#wrap {
position: relative;
height: auto !important;
height: 100%;
min-height: 100%;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
background-color: #aaa;
}
and HTML:
<div id="wrap">
<div id="content">Stuff goes here.</div>
<div id="footer">FOOTER</div>
</div>
The problem is you have a min-height of 100% on your container div. That means that the container will be 100% the height of its parent, which is the body tag which has a height of 100%. So if your viewport is 600px, then your body will be 600px, then your container will be 100% of that which is 600px, and then it will stick the footer after the container div which is why it goes below the veiwport.
So one thing you can do is just absolutely position your footer inside the body. Do this by changing your position to be absolute, and bottom:0px. It will float at the bottom.
You might want to put it in your container as well depending on what style you are going for and position it absolute in that and at the bottom.
Your problem is not that the footer is too low, but by making the body 100% it pushes the footer below the bottom of the page.
Consider putting the footer div inside the container div and getting rid of the margin-top: -5.5em and position: relative and it will work just fine.
http://ryanfait.com/sticky-footer/
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
This is particularly for anyone using ASP.NET master pages but also in general, if your content is also wrapped in a <form> element you will need to change
html, body {
height: 100%;
}
to
html, body, form {
height: 100%;
}