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 :)
Related
I'm pretty lost as to where to even begin so I will try to explain. I'm making a Hardware Store for my term project in Aptana Studio and am running the site in Google Chrome. Apparently, running a site in Google Chrome makes it automatically responsive? As you can see in the following screenshots, the site is fixed on the left side and responsive on the right side:
(resize 1)
(resize 2)
(resize 3)
(resize 4)
Of course, the black and white photo does not resize, but I actually don't want it to. I just want what is in the header (the logo and photograph) to stay the same size - to stay fixed on the page. Take Ace Harware's website as an example: http://www.acehardware.com/home/index.jsp
Everything in the site is constrained to certain dimensions. When the page is fully open, the content is centered and there is a margin of white space on either side. And when the page is resized (smaller), the margins start to disappear until finally there is a cutoff point - and the content does not change position anymore.
(full page)
(first resize)
(second resize - even though the page is smaller, the content is fixed)
This is exactly what I'm trying to do with my Hardware Store site. How do I achieve this effect? I've heard of bootstrap but I really don't know enough about it or which template I would use. Thanks for any help/adivce. If it's too complicated to explain here, please send me to a good tutorial you might know of.
What you're trying to do (at least, what i understood) is not a matter of "responsive". You're just trying to keep the whole page content always centered. (acehardware.com is not responsive eather).
You just need to define a constant width for the main div (the one which will contain the whole page content, except the background), and then keep it centered in the outer div, no matter the screen size.
This is what you got to do:
#main-wraper {
margin-top: 5px;
margin-bottom: 5px;
width: 360px;
height: 420px;
position: relative;
left: 50%;
margin-left: -180px;
background-color: white;
color: black;
}
#outter-div {
background-color: grey;
position: absolute;
width: 100%;
height: auto;
min-height: 100%;
overflow: hidden;
}
<div id='outter-div'>
<div id='main-wraper'>
<!-- The whole page content -->
</div>
</div>
This will keep the div centered in the parent container, and the parent container will be hidden the smaller the screen is.
I used smaller dimensions for main-wrapper in the snippet in order to make it easier for you to watch the effect in a smaller box. BUt you should use your own width. Just have in mind that the "left margin" for that div must have "half the width of the div" as a negative value. "left: 50%" will always center the div and keep the effect.
I want to create a page with vertically centered content (I'm using this method). I need to use two different page backgrounds. One is assigned to html tag and the other one to the body tag (it doesn't matter if I'll create div's instead). The first one is a background picture (full width & height of the view port, fixed, no-repeat) and the other one is just a pattern, intended to overlay the picture (repeat). I tried to use CSS3's multiple backgrounds for this case, but it didn't worked as I intended.
The problem is that when the content exceeds the view port, the body's background covers only the height of the view port. The solution for this is quite simple:
body { min-height: 100%; }
But it comes with a serious drawback. If I set the min-height value while the content doesn't exceed the view port, it won't be vertically centered.
I created a fiddle to help you better understand my problem. Don't mind the JavaScript as it does not play any role in this case. I used 1x1 px background images as an example.
Try to toggle the content's height while the body's height is set to 100% and scroll down. You will see what I'm talking about. You can fix that by toggling the body's height, but as soon as you toggle the content's height back to auto it won't be centered vertically any more.
I want the body's background to cover the full page height and have the content positioned in the middle no matter if the content fits in the view port or not. I've tried to achieve that for several hours and I failed, so maybe some of you know something that I don't and could help me with that.
Here is what I came up with:JSFiddle
I avoided your problem by making the .block div the size of your screen by fixed positioning. After this I used the .block div to scroll the elements inside. Hope this solves your problem ;).
.block {/*made .block fullscreen size so you cannot scroll the page anymore, but scroll this div instead*/
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
overflow-y: auto;
If you don not need < IE9 support, you can use transforms to do that.
http://jsfiddle.net/0tgvrw3k/1/
Basically you don't need the .block and make the vertical alignment using top, left, and transform. You need position: fixed;, as position: absolute; will make the viewport scroll.
Please do not forget to prefix the transform with -webkit-, -moz-, -ms- and -o-
I have a wrapper div with some content in it. Here is its css:
.wrapper{
width: 85%;
min-width: 970px;
max-width: 1500px;
margin: auto;
padding: 0.3%;
}
Now, within this div, I have another div, which I will call div2. It has no relevant styles to it, aside from cosmetic ones (background, font-color, etc.). Its behaviour is to simply take up the entire width of the wrapper div, no matter what the browser's width, zoom, or screen size is. This is as expected, and nothing is wrong here. I'm trying to make an addition onto this, and that is where I'm having trouble.
I have an image that I want to display, such that the bottom of the image is in line and touching the top of div2, and on the right side end of div2, so that the right end of the image is also in line with the right end of div2.
This would sound simple enough to do, but I don't want this image to mess with the vertical space. Adding the image in will of course introduce a larger gap between div2, and any element above it, which means I have to use position:absolute to take the image out of the regular flow of the page. However, my attempts at keeping the image at this same position, in line as described, have been unsuccessful. How can I keep this image aligned at all times, and under all possible user display circumstances, without having this large gap?
I've tried using the offset CSS top and left to move the image, but it doesn't work for all screens/zooms/resolutions/browser widths, and this isn't something I can practically use media queries for.
I'm not quite sure if I got you right, but I guess you need to:
#div2
{
position: relative;
width: 100%;
overflow: visible;
}
#div2 img
{
position: absolute;
bottom: 100%;
right: 0;
}
EDIT: Place your image inside of #div2.
So, your image, will always be on the right top of #div2. That's what you wanted to do?
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.