On this site here:
http://acp.studevent.co.uk/
I have a fixed div at the top which will act as a menu and a content div below containing everything else. I cannot figure out how to use overflow-y: scroll so that the pages scroll bar is only used for the content div and ignores the header div at the top.
PrimeFaces's layout/layoutUnit components do exactly what you needed. And if I'm not mistaken, they use javascript to calculate and set an height to the content. Each time you resize your page it recalculates the values.
You can check their showcase:
http://primefaces.org/showcase/ui/layoutFull.jsf
I dare say, you need to set a fixed height for overflow-y'to work. And one way to make it dynamic is to somehow calculate the necessary values.
Also you could make them have dynamically calculated fixed heights by using css positioning and left-right-top-bottom properties.
Best regards..
Related
I'm trying to stretch an image vertically in a parent container of my site (not the full body), it is the div with the id "imagen-fondo"
I have tried either backstretch plugin and also just css background-image with background-size to do it.
But the problem in both cases is that the calculated height of the parent container is smaller that the immediate child height, so, the background image looks smaller than the content itself.
How can I make it to be the same height as his immediate child or at least bigger?
You can see the live demo here:
http://50.21.181.12:3001/plantillas/mba
UPDATE:
I think the problem is that div#imagen-fondo is getting the height of the window and not of his content, that is the reason that when the screen is big, the problem doesn't happen, but when the height of the window is smaller than the content it happens, you can check it with this two screenshots, just as you start scrolling vertical the background image ends:
Something with overflows?
UPDATE 2:
For now I introduced some javascript to make it work,
Getting the footer offset position and stretching the height of the ".backstretch" div to that height.
But, if you resize the window to make the vertical scroll bar appear and inspect the page, you can still see that the parent container "#imagen-fondo" (from where backstretch should automatically get his height) is still getting the height of the visible viewport and not from the content itself.
If anyone finds a better way to do it CSS only will use that approach instead of this dirty one.
Clear floats in parent div using clear: both;
Or use clearfix on parent div.
For now I introduced some javascript to make it work,
Reading the footer position and stretching the height of the ".backstretch" div to that height.
But, if you resize the window to make the vertical scroll bar appear and inspect the page, you can still see that the parent container "#imagen-fondo" (from where backstretch should automatically get his height) is still getting the height of the visible viewport and not from the content itself.
If anyone finds a better way to do it CSS only will use that approach instead of this dirty one.
I've been trying to make a horizontal web page. However I don't want to keep setting the width to a certain width to accommodate the content that is floated is there a way to have the Div automatically re-size to the content that it contains? This way all the content is floated or "horizontally" scrolling? I'm using width:"specific size" but as soon as I have too much content it overflows is there a way to not have that happen and also where I don't have to specify a specific width size?
EDIT:
What I want is the whole website to be horizontally scrolling. I don't want just the specific div itself to have scrollbars, but I want the div to be able to adjust it's width to accommodate the content no matter if I have 3 divs within it or if I decide to add 6 divs later into the div.
For example what I want is like this. (Where even if I have more content it won't drop to the next line) I mean can this be achieved with css alone?) I specifically want that effect where the whole website is scrolling not just the div I don't know exactly if that website is doing that. Basically I want the whole website to scroll horizontally not just a scroll bar on the specific div itself.
For example vertically if you have more content you can keep scrolling down that is what I want, but I want that in a horizontal scroll of the website is that even possible?
Here is my code Jfiddle Code which is for tumblr but I want this for more than just tumblr. As I'm thinking of doing this for a regular website but where I manually will add more list items or Divs. I just want to see if there is a way to have the width adjust to the content so the floated content doesn't drop to the next line.
I think what you need is display: inline-block;
Like this: http://jsfiddle.net/ZDJbH/
Check this fiddle , is that what you need
div{
width:auto;
overflow:auto;
white-space:nowrap;
}
Set the css width property to auto
#yourDiv {width : auto;}
1.display:inline-block
2.float:left or float:right Because it will destroy line box.
3.position:absolute；（and without top, left or position:absolute) May be need to know information to use it.
I have situation like in following example (see in chrome):
http://jsfiddle.net/3fLP6/49/
There are div rows with some content and one div with variable content which should fill rest of available height. Everything works fine in Chrome/Firefox/Safari/Android/iOS but I cannot find solution for IE (I need solution for IE7+) is there any other way to acomplish this in IE?
I assume you mean that you want a header that always sits on the top, a footer that always sits on the bottom, and one div that fills the rest of the available space; no matter how small or large its contents are. I use these terms in the rest of my answer.
Well, there are to my knowledge three methods to do this in IE7+:
Use the position: fixed CSS property to position the header, footer and the body. This means you have to set the header to a top position of 0 pixels and the footer to a bottom position of 0 pixels. Furthermore, you have to set the top and bottom property of the body div to the height of the header and footer respectively. Consequently, this method requires you to know the exact height of both the header and the footer. Unfortunately, some older browsers (e.g. IE6) don't support position: fixed, so if support for those browser is important, you should go with one of the other options;
Use percentages to specify the height's of all the div's. Clearly, this is quite easy. However, if you want to set a specific height for the header and footer, that isn't possible;
You can also create a div width a height of 100% which will act as the body div. On top of that you position the header and footer div's using position: absolute (because of that, this will also work in older browsers). Then, you add to the body element two other elements: one div at the top and one div at the bottom. These div's have to be the same height as the header and footer respectively, because these two elements will make sure that the scrollbar is showed when necessary. Of course, you'll need to set overflow: auto on the body div;
Finally, you can also change the height of the body div using JavaScript when the window is resized. A big disadvantage of this method is that JavaScript is required, and therefore this wouldn't be my choice.
I hope I helped. Please ask any question if I wasn't clear (enough).
I have created a layout in CSS/HTML with the following structure:
Navigation in the footer scrolls the content horizontally to show two different screens. The screen content is fixed height and vertically centered and the layout always fills the entire window.
Because my content has a fixed height, I need the browser to display a vertical scrollbar when the window reaches a certain height.
I also have a couple of position:fixed <canvas> overlays that get cropped by the <html> and <body> elements which are set to height:100%; width:100%.
I hoped that by setting min-height:700px on the <body> selector I could get a scrollbar to appear when the window got too short. This doesn't seem to be work.
How can I make this website generally full-screen but scroll when below a minimum size threshold?
Well, that should effectively make sure the body is always at least 700px. However, position: fixed will still anchor them to the bottom of the viewport, so you will essentially be only scrolling the background. I believe you want the header/footer bars to stick to the top and bottom, so you can always see the full content between them?
So, does something like this fiddle behave more like what you're looking for? http://jsfiddle.net/jblasco/qPB9k/8/
It uses a wrapper div that does the min-height, and uses absolutely positioned bars instead.
Try this: overflow-x: auto;
It will try to put a horizontal scroll bar once the content exceeded the size of its container.
What I want to do is have a way to horizontally scroll through the icons on the top bar. No matter how I try to implement overflow I cannot get it to work. Here is a link to the page. Link no longer exists.
Note: that the scrollbar shall not cover the background image at all. It should be immediately below.
You need to set the width of that header div to be wider (width:2000px;). If you want a dynamic width (you dont know how many boxes will be in there) then you'll have to calculate the width with javascript (or serverside code like PHP).
Giving the .browser div a width of 2000px does the trick... then adjust the height of your divs to be tall enough to show the whole icon and name.
Let me know if that makes sense...