I need to make the gray sidebar of this page to occupy the left height of the page, going all the way down the page and touching the blue footer, without hacking it too much with things that might make the page looks higher than it really is.
I have tried using height: 100% and position: table-cell, amongst many other suggestions I googled, but nothing really worked.
Is it possible using Twitter Bootstrap?
jsfiddle: https://jsfiddle.net/3cb30uz1/1/
You could set min-height: 100vh on the sidebar, which would ensure that the height of it is at least 100% of the viewport height. Or, since you have a header, you could use calc() to subtract.
In this case, set this on the primary sidebar element:
min-height: calc(100vh - 172px);
Related
I'm very confused over the CSS style height: 100% and page layouts overall.
I typically end up setting html, body, and basically every container to height: 100% because if I want to have let's say 4 elements that split the height evenly, I can set them to height: 25%. Otherwise they will just take up their internal heights and could look really silly. And without their parents set to 100%, well, it won't work at all.
So fine, I give every container height: 100%. But then this has a bad effect if I have another page that should be able to scroll because it has a lot of vertical content and no defined heights. Yes, it will still scroll, but the child element is now technically outside main containers as evident through dev tools.
I think Bootstrap used to set height to 100% for html and body, but they no longer do (maybe I am wrong). Is this a bad design practice overall? What should I do instead of I want some pages to essentially not scroll and some to scroll?
Hope it makes sense and that this fiddle helps explain what I mean.
https://jsfiddle.net/jpzeqs1c/
I'm not sure about where you got the idea that every css element needs a 100% height, and it does not need to be used on every single container. Each container is used for different purposes, therefore you need to add the appropriate height, whether that is in px, vh, percents, etc. You can search pixels, percents, and viewport heights to find out which one is most suitable for your div containers. 100% for html and body is fine though. Overflows can be handled with overflow-x and overflow-y, and if you want to be able to scroll through the content you can use something like
overflow-x:scroll;
It's important to understand that height does not limit the height of the element and if the content does not fit within the height, it will overflow. Handling that overflow is done with the overflow property which specifics what happens if content overflows an element box.
For example adding overflow: hidden to your class, will prevent your element from overflowing:
.h100 {
height: 100%;
overflow: hidden;
}
Adding overflow: auto on the other-hand will add a scroll bar to the overflow if clipped, which is the intended behavior a lot of times. Keep in mind that if you only want overflow on a certain axis you can use overflow-x or overflow-y.
To to answer your question and if it's a bad practice no it's not a bad practice and regarding how to cause some containers to scroll and some not, this is done with the overflow property.
More info and useful resources:
Overflow - https://www.w3schools.com/cssref/pr_pos_overflow.asp
Height - https://www.w3schools.com/cssref/pr_dim_height.asp
This is the page I'm working on: http://www.vqinteractive.net/temp/index.html
I need the nav side bar and the main content area to evenly stretch to the bottom of the browser (or beyond, with content), whether they be empty or one has more content that the other. I put a border on the surrounding container and that is not stretching either. I'm pretty new to fluid grids and I'm finding all the old tricks, like position: absolute with height: 100%; are blowing out the grid system and height: 100%; alone does nothing.
I've been hunting through threads for the answer but haven't been able to find anything that pertains to responsive design. Also keeping in mind it is set up so the when the content is longer than the browser, the pic on the right stays fixed while the left side scrolls. Any help would be greatly appreciated.
Thanks in advance!
Visually, this is what I'm trying to do, with or without content, scrolling with:
http://www.vqinteractive.net/temp/images/example.gif
I fiddled around with the Google Chrome object inspector, and found this to work pretty well:
#media screen and (min-width: 1241px)
#main {
min-height: 85%; // <---- REMOVE
min-height: 600px; // <---- INSERT
}
The image does not count as content for the box you have set to a min-height=85%, and that box will therefore not expand without a definite min-height. Setting 'min-height: 600px', the box will always be at least the size of the image, and then expand if you add additional content in the box.
Using Twitter Bootstrap v3.1.1 I created a custom WordPress theme for a client. All was going well until I realized in IE and Firefox the images were showing full size and outside of the boundaries of their parent elements even though I have max-width: 100% set.
I did some hunting around on the internet for options, naturally, and it was mentioned to put height:auto; on the img tag. This nearly worked, but images began to be stretched in some places, and still not obeying max-width in others.
Here is an example of images in widgets in the sidebar not obeying max-width: 100%
I hunted around some more and came across more hacks for Firefox and IE. Then Chrome started to misbehave as well. Now I have a messy stylesheet with tons of CSS hacks and there are still issues with images being stretched or showing full size. One of the suggestions was to mess with box-sizing and set the width of img to 100%, which results in the below with smaller images than the width of the parent container being stretched.
I'm about to go back to the drawing board where I'm only using max-width: 100% and start over.
My question is: how can I get ALL images used on WordPress to behave correctly and follow the max-width: 100% CSS rule? This is a responsive website and I need all images to stay within their containers, NOT be stretched or skewed, and grow/shrink while constraining proportions as the browser size changes.
It's not because of Bootstrap and WordPress together - we use it all the time. You can use
img {height: auto; max-width: 100%;}
and that will make all of your images responsive, which will also fill their containers up to 100% of the original image width and resize the height to maintain the aspect ratio.
If your image's container is 1000px, however, and your image is originally 500x250, the image will only fill up half the container because max-width: 100% will give the image a max-width of 500px.
You can use
img {height: auto; width: 100%;}
and that will ensure that your image fills the entire container. But beware - in the above 1000px container / 500px image scenario, your image will scale up and might begin to look pixellated.
Another thing to note - your images might be overriden in the widgets. For example, one popular sidebar images widget hardcodes the width and height into an inline style (a horrendous practice and I hope they stop it). You can override that and make it work with:
img[style] {height: auto !important; width: 100% !important;} //or
.widget[style] img {height: auto !important; width: 100% !important;}
I'm willing to bet that your sidebar image problem is that there are styles (via the plugin css or inline) that are overriding your original image settings.
So this ended up not being specific to Bootstrap or WordPress. It was a combination of
A style I had copied in from who knows where a { display: inline-block; }
Bootstrap box-sizing on all elements
WordPress using width and height attributes on images
After I took out the weird a { display: inline-block; } (that I still don't even know how got there and can only assume I was tired and loopy), most of the image issues went away. I just had to target a few instances of images to get them to behave.
I'm happy to know I can use Boostrap in the future to help speed along project styling. Thanks, everyone, for the help!
I have created a page that has a min-height of 100% with a footer, as outlined http://peterned.home.xs4all.nl/examples/csslayout1.html
It works for the page-filling div, but I would like to have elements inside it which also take up all the height available to them.
Attempts:
Adding height: 100% to them does not work. They will use the parent's height but there are other elements and padding etc so that's the wrong height.
Making them absolute and set top: 0px; bottom: 0px;. This will make the div fill up the entire height, but if content is added the div doesn't get higher.
If this explanation is unclear, I have an example here: http://markv.nl/stack/quine.php
So the parent dictates a minimum height, as does the content. The highest of them should be selected. I've found this a formidable challenge; is it possible without javascript?
Thanks in advance!
It is possible without javascript. But you should not use absolute positioning with this problem. Use this solution to have footer stick to the bottom of the page. And make content div min-height: 100%. With more content it expand and push the footer down and with little content footer will be at the bottom of the page and content div will be pushed up to the footer.
After a lot of fiddling, I am quite confident that what I want to do is impossible. Correct me if I'm wrong.
In my case, it turned out a fix was possible. I used the position: absolute to create the background pattern. Above that, I added the content in a width:100% div to make the page scale.
It'll only work for some applications, but I think a general solution is not possible.
Here is my site: http://dl.dropbox.com/u/331982/Sandbox/comsat.html
To get the items to appear that are messing up the 100% width: click two hexagons and have your browser maximized.
#playerTwo, the right hand section, has a large chunk appearing off the right side of the browser i.e. scrollbars appear.
I know there are some issues with percentage widths in browsers, and one of the solutions I found was setting the margin and padding to 0px, but it didn't help.
*The reason why I'm using percentages, is because I plan on eventually making the page responsive. =\
This is because you have width:500px on #playerone, #playertwo, and width: 40% on .nameslider, and you don't have position:relative on #playerTwo, so it's width is calculated from the documents' width.
So to fix it you can try to add position:relative;overflow:hidden; to #playerone, #playertwo and set the width for .nameslider to 100%.
Or maybe just experiment a little more — there are a lot of things to improve in your markup :)