I'd like to create a that extends from wherever it starts to the bottom of the page, but does not extend beyond the bottom of the page. It has overflow-y: auto, so that if the div content is too long, a scroll-bar will appear (for that only, not for the whole page).
I tried height:100%, but that makes the height equal the page height... so if the doesn't start at the very top of the page, it ends up being too tall.
(Example: window height is 100px; stuff at the top of the page take 20px; I want the to be 80px high. But I want it to be automatically resized to 70px if the window is resized to 90px.)
Can this be done without JS? If not, how do I use JS to do that? (Using FF 3.x, but a cross-browser solution is of course preferred.)
Sounds like you want something along the lines of the following:
#myContainer {
position: absolute;
top: 20px;
bottom: 0px;
left: 0px; /* Should include space for a sidebar, if you have one. */
right: 0px; /* Same as above */
}
OK, found the solution -- making the position absolute and setting the bottom to 0 (and top to whatever the top is).
Have you tried setting the body margin's to 0?
Related
I want a div to stick to both top and bottom while being responsive on all sides.
I have a view consisting of 4 divs and 3 of them works well in responsive layout but in one I have a chat window (bottom/left) that doesn't have a very good height response.
Below you can see the 4 divs in full view and it's looking the way that I want it to look:
But once I start, either moving the side of the inspector to the left or look on a mobile device, the chat window reveals it has a solid height and leaves empty space below it (it sticks nicely to the top at least):
I can't seem to get around this problem (stuck for a week now); if I change the current viewport height (vh) to more it will only disappear underneath the screen and if I use % nothing happens. Here is a piece of the actual chat css:
#chatlioWidgetPlaceholder{
position: absolute;
z-index: 10000;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding: 5px;
font-family: input;
}
...but once again, vh or % doesn't work out on this one either. Does anyone understand my problem?
I believe it could be something with the height of the top parent div because it doesn't stretch to the bottom (blue marked) and therefore can't grow:
I placed the HTML and CSS in https://jsfiddle.net/3chdp873/2/
I stripped the syntax from other divs for easier readability but if needed, just let me know :)
I'm trying to use html to set the height of an iframe to 100% (which I have successfully done), but I also added an extra line of text at the top, so it's ~16px too tall (which requires a scroll bar). Is there a way to change the iframe to display something like height="100%-16"?
Using calc(), you would use the following: height: calc(100% - 16px);
Unfortunately, this method doesn't have full support across browsers: reference here.
Example here
If you’re trying to make the <iframe> fill the entire window except for the part with the text, use absolute positioning instead of setting specific dimensions:
#my-frame {
position: absolute;
top: 2em; /* Whatever height you like */
/* All the other ones are just distances from each side, not sizes */
left: 0;
right: 0;
bottom: 0;
}
This works for all elements and takes into account both border and padding.
At cjshayward.com/index_new.html, there is a wrapper div around the body's content, about 1000 pixels wide, and it works as intended for the top 100 or so pixels in Chrome and Firefox. Next down the page is a jQuery UI set of tabs, containing a fixed-width accordion and something close to jQuery.load()ed plain old, simple HTML.
However, on the "Browse the Library" tab (but not "About the Author"), which is presently open and which contains the fixed-width accordion, below 100 or 150px down, the area under the tabs appears to have the same width as the window; it has the correct left margin, and horizontally scrolls an apparently equal distance to the right. Furthermore, the body background tile does not display; the whole width is white, as was specified for the wrapper div's interior.
How can I get the "Browse the Library" tab to display as intended (like the "About the Author" tab does)?
Thanks,
You're absolutely positioning way too much and that's ruining the flow of things. I'll go through a list of edits you can do to make this work.
/*
#accordion and #details will be floated, so we'll need to
clear #tabs. Add this property.
*/
#tabs {
overflow: hidden;
}
/*
Remove the absolute positioning from #accordion, along
with the top and left properties and do this instead.
*/
#accordion {
float: left;
width: 400px; /* This already exists */
margin: 0 10px 0 0;
}
/*
Remove the absolute positioning from #details, along
with the top and left properties and do this instead.
*/
#details {
float: left;
width: 580px;
}
This will get you a lot closer. You should also try to avoid using height on these elements. Let the content dictate the height.
Here is what i ended up with making those edits: http://i.imgur.com/niizuoR.png
Okay lets make a step by step solution (watch for the edits).
Background
Your background is set in the body. So the body needs to be extended to fill the whole page.
I would recommend this way but there are others.
body,html{
height:100%;
}
Normally the body would fit its contents but with position:absolute this mechanism doesnt work anymore.
Also remove background: #fff css (normalize.css) from the html.
html {
background: #fff;
color: #000;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
Also your background scrolls with your content. Set background-atachment: fixed to change this.
Wrapper
Same counts dor your wrapper which holds the white background.
Set its height to 100% too.
div#main {
height: 100%;
}
The reason why your content is bigger than your wrapper is that
<div id="details" style="width: 713px; height: 0px;">
this div holding the content has a fixed size set. Removing that size make it fit the wrapper.
The width seems to be set per javascript in the load event, so I cant help you with that. Provide your .js code and may i can help you with that too.
As stated in the comments, your layout issues are based in your use of absolute positioning rather than flow layout:
I went through your site and quickly switch everything so it was positioned statically (width floats, not absolute values) and this cleared up the issue. There were some other issues as well. You probably need to look over how you are setting up your HTML from the top level on.
I would start out again and concentrate on using floats for your layout, rather than absolute positioning.
For a basic example on doing so, here is a super simply page: http://cdpn.io/kmCFy
I'm writing a mobile/desktop chat application that is supposed to utilize the entire screen. The bottom <div> shown in yellow can be fixed-height if it needs to be.
presently it's Absolutely positioned to the bottom of the window.
My problem: the top <div>, in cyan, doesn't fit to the rest of the window, regardless of whether I use padding, margin, border, etc. Presently it appears to allow the content to wrap, but that's only because the bottom overwrites the scroll bar.
My only solution so far is to have a final <div> or <br> that pads the end of the scrollable div, but that doesn't make the div smaller, or make the scroll bars properly align.
Here is my source code so far in Fiddle.
Can you edit your CSS and set the DIV with the chat text a class like .break-word and then in CSS declare it with word-wrap:
.break-word {
word-wrap: break-word;
}
Unsure on the covering of scrollbars. You should post your code for others to view and might be able to pick something out.
This style code basically sums up what I'm doing to compensate for my issue. (Instead of, say, using HTML tables.) This may not be the best solution.
#topPart {
position: absolute;
width: 100%;
top: 0;
bottom: 40px; /* or however high the bottom is */
}
#bottomPart {
position: absolute;
width: 100%;
bottom: 0;
height: 40px; /* same as above */
}
My problem seems very basic but I can't get it to work.
I'm trying to create a lay-out with no header, a footer always at the bottom and two columns. The right column has a fixed width (770px) and the left column should use the rest of the space. In the left column OpenLayers will be used which will fetch Google Maps images to fill the space.
The page needs to be visible on smaller screens as well and should work in FF, Chrome and IE7+.
I'm starting with a wrapper that has a min-width of 1200px. This is for the smaller screens. Scrollbars will appear then.
Next I've created 3 divs inside the wrapper: leftframe, rightframe, bottomframe.
The bottomframe used this CSS:
bottom: 0;
height: auto;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: auto;
width: auto;
min-width: 700px;
z-index: 5000;
This works good. The footer is always nicely at the bottom.
Now the problem comes. When I resize my viewport or show the page on a small screen the leftframe must resize to fill the remaining space. I've tried a lot: floats, positions.
What seems to be working is to absolute position the right frame and give the left frame a margin-right the same as the width of the right frame (770px):
#leftframe {
width:auto;
height: 100%;
margin-right: 770px;
}
#rightframe {
position: absolute;
right: 0;
top: 0;
width: 770px;
}
This seems to work as well. At least for the width.
The right frame is dynamically filled with data I get using AJAX. In some occasions the returned data is larger than the min-height I've given to the wrapper. This is fine for the right frame, its height is adjusted but the height of the wrapper isn't and thus the height of the left frame isn't adjusted as well. This result in a right frame that is higher than my left frame and a blank space is between my left frame and footer.
How to solve this? Preferable without using jQuery or similar but with CSS only.
[Edit]
Using the example provided by Zuul I've created these few lines of jQuery and it seems to work now.
These lines are called when I'm finished processing the AJAX data.
var currentHeightRight = parseInt($("#rightframe").css("height").replace("px", ""), 10);
var currentHeightWrapper = parseInt($("#wrap").css("height").replace("px", ""), 10);
if (currentHeightRight > currentHeightWrapper)
{
$("#wrap").css("height", currentHeightRight);
$("#map").css("height", currentHeightRight);
}
If I've understood your problem correctly, I've made a Fiddle to show a way to deal with your problem:
http://jsfiddle.net/zuul/TdTCU/
Additionally, there's a button there, to simulate the global resize :)
Notes:
The better solution for this kind of problems is the absolute position of elements inside a wrapper. Basically setting up a structure for all rest.