I am trying to create a navigation element (nav) that spans the full width of the page, but when the windows shrinks enough where the text overflows, the text wraps. As this is the navigation bar for the page, I'd prefer it didn't wrap and the page just scrolls when the nav's content overflows it. I was thinking giving it a width in pixels instead of just 100% would work, but I don't know how to make it the full width on every screen using pixels. Any idea how to do this? I am using SASS too if that could help with a solution.
Basically, I need a solution that makes a element act as though its width were set to 100%, but it can't wrap the text if there's overflow. The window should scroll if there's overflow.
Put in the css style white-space:nowrap;
If you want a scroll bar in the div, go for overflow:scroll; and set a height of one line, and don't use nowrap.
Full width should be easy: width: 100%
If you want specifics, show us your code.
I think your best bet would be to set a minimum width on your nav element. This way, it will only scale your div to a certain point so it doesn't wrap. The only downside of this is that you need to specify a width, but the upside is it works without any of the div being cut off.
http://jsfiddle.net/piedoom/Km4Xa/1/
You can see in my CSS I have the following:
div
{
width: 100%;
background: red;
min-width: 250px;
}
The min width specifies how small the div can get before it just stays at that value instead of taking the window as it's width.
You can also apply this to the body so it works on all elements.
Related
I have some stretchable elements on my HTML page.
With this CSS
.stretchable-element {
height: 25%;
}
As the height of the browser window increases, the stretchable element gets taller. As the height of the browser window decreases, the stretchable element gets shorter. But when the browser window gets too short, the content in the stretchable element will overflow. I have multiple stretchable elements so I can't simply set a fixed min-width. What I want to achieve is something like this:
.stretchable-element {
height: 25%;
min-height: just tall enough so the text inside this element will not overflow
}
Basically, when the browser window is made shorter on the y-axis, the stretchable elements will decrease in height until they each hit a point where they're just big enough to fit the content that they each contain, and they won't get any shorter after that.
I think you'll need to do this with javascript. Basically when the window loads, you'll need to find the height of all the contents for each stretchable-element. Then you just need to set each stretchable-element's min-height to that value using javascript.
I have a div near the bottom of my page that I want to extend all the way to the very bottom edge of the window so that the background color of the page can not be seen below it. Initially, depending on the size screen that the page was rendered on, a small sliver of the background color was still visible below the div. By adding
html, body, .wrapper {
height: 100%;
}
to my CSS ("wrapper" being the class of the div in question), I fixed that issue, but now the div has a height of around 500px (it varies based on the window size) despite the only element in the div having a total height of 132px (which does not change regardless of window size). Because of the positioning of the div, this 500px height makes the page stretch and now there is a large blank space at the bottom of my page, underneath the content inside the div.
I used Chrome's developer tools to inspect the HTML, body, and div tags and there is no strange padding/margins and no defined height (other than the "100%" that I set). If you'd like more code I can gladly provide more but since I don't know exactly what the problem is I didn't know what would be relevant (plus I'm using bootstrap so finding all of the relevant CSS can be a pain sometimes). Thanks in advance.
You can use flexbox to have the .wrapper, or .table in your example, div fill up the remaining height.
For the parent element (in your example, body) set display: flex; flex-direction: column;
For the element that you want to expand (.wrapper or .table) set flex-grow: 1.
Your Example Updated: https://jsfiddle.net/754s67ur/2/
I have updated the fiddle you posted in the comments to add background colors and removed paddings and margins to better visualize the problem here.
What you need is the CSS calc function to have your .table div take up 100% of the page MINUS the nav and body content of your page (represented by the <p> in your fiddle).
In the fiddle they are both 18px, so combined it's 36px and that is what I need to minus from the 100%. So the style would look like this:
height: calc(100% - 36px);
This is how you calculate the remaining space. But this only works for static height elements. Here is a fiddle of the solution.
I'm stuck with this rather odd problem that occurs whenever I place an image in one of my fluid grid layout columns. When the width of the page is anywhere above 400px, the width of the page is calculated properly. But when I shrink it down to below 400px wide, then the page stays the same width and you have to scroll left and right.
The problem even persists when I set the width image's container to, say, 50%. The image and its container shrinks, but the div that contains the image container still expands beyond the width of the screen. If I set display:none; on the image, or remove it altogether, the problem goes away and the width of the page fits the screen correctly.
Thanks!
The page: http://cdhinternational.org/index3.html I'm having trouble with the image at the bottom. (The Responsive Design Mode in Firefox is a great way to reproduce the problem. Just set it to 320x480px.)
You need to set the width of your content-container.
#content-container { width: 100%; } should do.
P.S. any particular reason the content-container is floated left? If you remove float: left; from the content-container that should also do.
I'm having some trouble with my web page. A picture probably descibes it best so here it is:
http://a.imageshack.us/img837/8223/skjermbilde20100902kl18.png
The text at the bottom is supposed to be inside the white area. I want the white div to change in height depending on the content. I have a div that centers the white area in the middle:
#mainContainer {
margin-left: auto;
margin-right: auto;
margin-top: 20px;
width: 800px;
min-height: 700px;
height: 100%;
}
I have also set html and body to 100%. But the problem is that the div stays at 100%, no matter how much content there is. Now a really strange thing happens when I set height to auto:
http://a.imageshack.us/img837/8295/skjermbilde20100902kl18y.png
This is how it should look (and how it does look using height: 100%):
http://a.imageshack.us/img837/7112/skjermbilde20100902kl18b.png
The full page can be found here (click on "Om oss" to see the page with the misplaced text)
I would really appreciate it if someone could figure out what the problem is! :-)
(Hopefully the CSS and HTML is easy to understand)
Edit: I just noticed that it renders properly in Safari, but not in Firefox.
You have given html and body a height of 100%. (Many child divs also have height:100%.)
What this means is that they are 100% of the size of the viewport, not the content. IOW, they are limited by the height of the browser window, and any content that stretches below this will be outside of any backgrounds applied.
Edit: To further elaborate, you have set up the background images (drop shadows) on the left and right on empty divs that you tried to stretch using height:100%, but since they do not contain anything, they can only be the height of the parent elements, which are themselves the height of the veiwport. When you set the html and body (or any other intermediate element) to height:auto, these divs (mainContainer-middle-left and -right) collapse to the size of their content, which is nothing.
You should probably reconfigure the html so these elements are parents of the actual content and get rid of all "height:100%" statements. They don't mean what you think they mean!
Stian,
For the div #mainContainer, set the height to auto.
For the div #mainContainer-middle, set the height to 550px.
That should fix your layout issues.
I just need a little help with some CSS layout if you don't mind.
I've got three things I'm trying to play around with and I need some help making this work the way I was hoping.
I've got the <body> element of a page, which I'd like to be 100% of the browser window, obviously.
Then I've got two <div> elements which I'd like to stack on top of each other, but the trick is this, I'd like the bottom <div>, (a menu which should really be a fixed height) to determine the height of the top <div>.
Is there a way to lay this out in CSS?
I'm assuming you want the height of the first <div> to have a height of <body> minus second <div>.
If you're using percentages in your layouts, then you can make one have a height of 90% and the other 10%.
But if you're using pixel sizes, you'll need to use javascript. There's no way to determine height by subtraction in CSS 2. You can use offsetHeight to get the pixel height of an element and style.height to set the height of the other.
If you want the bottom <div> to be fixed to the bottom of the viewport all the time regardless of the height of the top <div>, then set its position to fixed. E.g.
#menu {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
}
Else if you want to expand the top <div> to the bottom of the page if its content is smaller than the total height of the viewport, i.e. the "sticky footer" technique, then have a look here or here.