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.
Related
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 have 2 section in my HTML document see Here, now when i reduce the window size to about 820px the 2ns section shrinks , Why does that happen?
see screenshot below:
now the second section has overflow:auto, if I remove that, everything works fine, Link HERE
But what is really causing the issue, the section element is definitely a block element, so why is it not taking 100% width? Can anybody explain?
You should delete section element's margin-top: -1px; style or set .intro-lpoo element's style: overflow: auto. The reason what I thought is here: BFC
Your floating elements on the top section cause the issue. If you use clearfixes , you will not have any problems!Also use the following property for responsive images.
img{
max-width:100%;
height:auto;
}
Ok, let's think about it.
You have intro-lpoo section with height: 100% and 2 divs into it with float. And 1 of this divs have height: 0 because in that you place absolute positioned img. The reason why your why-coworking not shrinks from the very beginning is height: 100% of intro-lpoo. But when you make your browser resolution smaller - height: 100% of intro-lpoo getting smaller, and because your right div (which contain absolute positioned img) have height: 0 and your left div ( intro-wrpr ) have float: left thats why why-coworking shrinks and fills available space next to intro-wrpr.
I hope to able to explain
I am attempting to create a simple webpage using React. I want to have a fixed navbar at the top of the screen and then content below it. My general structure is one in which there is a single div in the body, which is where the React application is "injected". The application itself consists of a top-level "app" div, and various child components.
<html>
<head>
<title>Sample App</title>
</head>
<body>
<div id="react">
</div>
</body>
<script src="/build/bundle.js"></script>
</html>
The issue Im having is that the div with the id 'react' is not filling the entire body of the html page. Therefore any content I have inside of my application div overflows outside of the 'react' div.
This code pen illustrates my problem: http://codepen.io/anon/pen/xGNejM
You can see at the bottom of the page that the lime background applied to the html tag is bleeding through. It is as if the body tag is not filling the whole screen. I thought setting height to 100% on html and body would handle this, but apparently not.
100% height on html and body is filling the whole screen on startup, but not if the content is longer. Set your outer divs to overflow:hidden and your inner div to overflow: auto.
I have modified your fiddle.
Try an implicit measurement on the body:
body { height: 100vh; width: 100vw; }
vh and vw viewport height and viewport width are like ems on steroids.
UPDATE
http://arcx.s3.amazonaws.com/test.html
So according to what I've gathered, you need the content to be displayed from the #react > #app and the #react > #app itself must expand according to it's content #child. I did a couple of things:
got rid of all the position: relative
replaced the height: 100% with height: 100vh
left no dimensions on html,body and added position: fixed
added a footer#foot at the bottom with position:relative so there's padding at the bottom to prevent the content #child from being cutoff from the display.
as suggested by #m1crdy I added overflow: scroll (I chose scroll over auto I don't like jumping scrollbars) to the #child but I didn't need to apply overflow: hidden to anything since I made the other components "static".
The content is editable, so type and hit enter key 100,000 times and it'll still expand without cutoffs or text jumping over borders. When you inject content inside, you might need a <br> or \n at the end for good measure.
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.
I'll try to explain this as best as I can ;)
Basically, I have a sidebar <div id="sidebar"></div> which is floated to the leftside and has fixed position. I planned to have another div just after it that will contain the content, but the problem is that, because sidebar has fixed position the div that I expect to be after it (to the right side) is appearing behind sidebar. This is an issue, because I need to use margin-left: 310px (310px is a width of sidebar) to make another div appear after the sidebar, so instead of occupying 100% width left on the page without a sidebar's 310px it occupies full page and causes align problems.
It's hard to explain, but if you visit my page http://freshbeer.lv/development/en/ you can see white div, it has margin-left: 310px; and width: 100%; inside it there is a grey div with width:700px; and margin: 0 auto;. I expect grey div to be aligned in the middle between 2 images at the background, but as white div is occupying more space than needed it doesn't happen. Could anyone suggest a solution please?
Maybe I am misunderstanding your question, but in #container you can either remove width: 100% or change it to width: auto.
The problem is that it is getting the width of the parent container (which if you go far enough back is taking the width of your browser window) and then adding the margin. So it is 100% + 310px. Hence the reason it is 310px wider than your browser window.
Try this. First, make sure that your side bar is first in your script. Then, do not set the width of your main section. Instead, just say display:block. So something like this:
<html>
<body>
<div style="width:310px; float:left; background:#dddddd; height:500px;"></div>
<div style="margin-left:310px; display:block; background:#ff0000; height:500px;"></div>
</body>
</html>
In the above example, the top div is your side bar, and the second your main body section. I just added the heights so I could see the columns during testing.