I am using the Chat design from https://bootsnipp.com/snippets/featured/message-chat-box inside a sidebar with width:250px; and a margin-top:80px; due to a bootstrap navbar.
However I want to resize the height of the chat history to fit the remaining height inside my page and I have no clue how to realize that. I tried height:100%; but that doesn't work.
you can find a fiddle at http://jsfiddle.net/yq3g9djc/
EDIT: I realized it now with jQuery. I calculate the window height and set the height of the chat history minus the offset.
Experimental css such as height: -webkit-fill-available; is one way. It's the laziest way to do it. The better way would be to style your page so that the chat panel can be placed on the right of it. Otherwise, doing anything fancy with this chat panel would prove difficult later on if you do not fix the issue properly now.
Related
Already a long time ago I started with a new homepage project. I've learnt to build up a homepage on my own, so I'm still in the learning process. Therefore, it might be possible, that I've chosen sometimes not the best way to implement something.
I'd like to have a full width header (and footer) on my webpage. For this reason I created some div tags like this one below:
.header_container_overall-1 {
height: 90px;
width: 1000px;
padding-left: 1000px;
margin-left: -1000px;
padding-right: 1000px;
background-color: #f1f1f1;
}
The problem now is, that a browser (or a mobile device) shows a horizontal scroll bar. I read in a post, that I could use "overflow-x: hidden;". I applied this snippet of code into the "body" class of my css-file. The horizontal scroll bar disappeared, but you can still scroll to the right using the arrow keys on your keyboard.
Unfortunately, I kept programming my website knowing this bug (I thought, that I will fix this later, but I think, this was not the best idea). However, I now came back to this bug and tried to fix it. I found several threads, in which the same problem occured:
kennykee.com/118/div-100-width-without-horizontal-scroll-bar/
stackoverflow.com/questions/18274386/div-overflow-is-hidden-but-still-can-scroll-using-keyboard-right-arrow-key
Then, I tried the following steps:
adding the "overflow-x: hidden;" to several classes (especially the header and footer classes) with the aim to prevent horizontal scrolling. I tried several options and in the end, I got a website, where the header and footer got clipped at the body (for example I got a width of 1000px instead of a full width).
when I tried to use "position: relative;" or "position: fixed;" in different classes, I ended up, that the main page (which is now centered because of margin-left and margin-right set to "auto") was set to the left.
I hope, you understand what I mean. It's hard to describe, even more with my bad English ;-). And as you can see, I sometimes tried stuff without even knowing, what I'm doing. It was more and more "try and error" and I came now to the desicion, that I'm at the end of my html and css knowledge to fix this problem. Maybe you can see the problem right now or maybe you have an idea, what I could try to do.
The website with the described error is available on:
http://www.airlink.ch
The css file is available too:
http://www.airlink.ch/stylesheets/layout.css
If you need any further information, please let me know. And sorry for this long explanation.
Best regards
I did not read the post much further than your CSS. I am sorry but you should not be using hacks like padding 1000 PX and margin 1000px. If you want a full width div, set the HTML and body elements to width: 100%. Then add width 100% to your header/footer div. Make sure to add the meta viewport tag for width = device width. You should do a quick google for some resources regarding device width and responsive design in general.
Hope you can get what you want working!
Basically, I'm trying to make my first website, ever, and I'm having trouble already.
I'm making the navigation bar and it's all looking good, but as soon as I put my browser into windowed mode, the navigation bar extends beyond what it was, so I have to scroll sideways to reach the end of it.
P.S.
I'm new to stackoverflow, still trying to figure it out.
So I might do something I'm not supposed to, just let me know and I'll try to fix it.
Edit 1:
I'm using Google Chrome.
Here is the JSFiddle with full code:
http://goo.gl/Z5wvTn
If you look at the header and footer, you should be able to see that the main section and navigation bar is actually wider than them.
The navigation bar and main section are within a div, while the other elements arent.
This effect is on a much larger scale without JSFiddle.
You want to create something like this: JSFiddle
If yes, then use % or emin place of pixels
Place the header and footer in the wrapper div and then decrease or adjust the width of the .wrapper div in your css.
jsFiddle
Based on what #Aayushi Jain and #Shivam said use wrapper with percentage. That way, your wrapper will respond according to the window screen.
Look up responsive design if you want to know more about it.
My version would be to add width:100% on your wrapper instead of defining fixed width.
Also, practice on using ems and % like #Aayushi Jain said.
.wrapper {
width: 100%;
}
Been struggling with this for at least a couple hours now. Tried searching around but no solution seems to be working. So anyways, I have a template that I'm working on, and the issue that I'm having is that the sidebar on the left just will not stretch all the way down! If the window is maximized, it looks totally fine. Once you resize the window though it breaks, leaving a large gap between the sidebar and the footer. It also breaks if the content goes down the page any more than it currently does...
See for yourself here: http://bakedcraft.ca/laboratory/testsites/crock/template.html
and the css: http://bakedcraft.ca/laboratory/testsites/crock/css/default.css
Any ideas?
Add position:relative to your .main class
right now your side bar is 100% height of the window, not the main container. by adding position:relative to the sidebar's parent, when the sidebar is 100% height, it becomes 100% of the main div.
Sorry, this isn't really an answer but it's not letting me write a comment...
I looked at your code in firebug (firefox + web developer add-on) and it's showing a box constraint of 467px height I tried to quickly find where this 467px are coming from but can't see it with quick look (it's 4 AM). It's inheriting that height from somewhere, most likely from a combination of other size constraints of related elements. With all the positioning you have going on, in may be hard to locate.
One suggestion I have is if you plan on making a fluid layout you should work with em's rather than straight pixels. As I said, this isn't an answer but I did notice the size constraint of your sidebar. If this problem is still open in the morning I'll see if I can get a better look at it for you.
Alright I was running your problem through my head and I think I figured it out. Forgive me cuz I'm typing this on my phone and can't use firebug to verify if I'm right or not but the constraint I noticed earlier of 467px is n't inherited from another container it's being constained by the text in the sidebar div. If u were to add more text the box will grow with it. I believe what u may want to do is make a child conatiner within the side bar div. Your main sidebar div will only house your grey background color grey. Create a child div within the sidebar div and put your text and images into those. Make sure on the parent div you make it's height 100%. The height of the elements inside the child div shouldn't need height specifications since they will be inherited from the parent sidebar div. Hope this makes sense.
You can do the fix mentioned earlier with using jquery but remember if someone shuts of their JavaScript then your issue remains and your page will break. You should try to find and fix the root cause not use a bandaid that can be taken off.
I'm pretty sure the question has been asked and answered, I don't know HTML and CSS well enough to know where or how to search. Any help would be appreciated.
I have a community application built in Silverlight: http://www.scalerailsonline.com/default.aspx
Having finally decided to give Microsoft the chuck I'm rewriting it from scratch. 90% of is pretty easy. I'm struggling with the HTML and CSS to accomplish the chat portion of the app.
I've marked up a screen shot to show what I'm trying to do.
The main goal is to create a scrollable container that expands and contracts to fit the available space.
First I want to have the web page expand or contract to fit in the browser window.
Second Right column expands horizontally to fit the content and the bottom area expands vertically to fit the chat entry controls.
Once the page is fit to the browser and the space is committed to the right and bottom, i want the container to fit. If the content in the container is too much (99% of the time it will be), then vertical scroll bar will display.
I have tried all kinds of combination of width/height: 100%. But that just seems to make the areas big enough to fit the content, not constrain to a 100% of the browser.
I can set the div to "Height: 200%; Overflow: Scroll" to get the scroll bars. But I just don't seem to be able to get the div to expand only to the available space.
First I want to have the web page expand or contract to fit in the browser window.
This can be achieved by setting the margin left and right to auto. Try this -
.center {
margin: 0 auto;
padding: 0;
float: none;
}
The answer is: There really isnt a good answer. Resorting to java script resize event to set the hight of the box based on screen room - heights of screen elements.
I'm currently working on a horizontal site looking to make something like http://www.thehorizontalway.com and was looking to add in some great new css3 animations but have found that 4000px wide is a magic number that breaks the animations (appears the divs position stops working) I've looked into the -webkit-box modeling and -webkit-box-orient:horizontal but neither of these seem to be a fix (and can't find slot on the webkit box)
Does anyone know why this is happening and what I could do to
Not sure about the 4000px, never assumed it would be an issue with animation.
Try Using percentages:
The wrapper = width:100%; height:100%; = What you're seeing on screen at a time,
20 pages = width:2000 % height:100%; which will be the mask of the entire site,
I believe these should be position:absolute; to prevent conflicts;
Then you will probably want to put some divs in per page content:
width:100%; height:100%; float:left; with page link #id's as you know.
It won't make your site look like "The Horizontal Way" It can be considered as a
better method as you can make your content fit to every page jump & re-size.
Oh and...Why horizontal... you can stack your page content to give
a diagonal effect if you want but, it's sometimes shaky on lteIE8, with that said if
you choose to go down that road easily you can condition the layout for IE users horizontally.