I have a container DIV. Inside the container are three elements. Two banner DIV's (simulating a header and footer) and a TABLE. The TABLE is enormously wide. There is no way to get around the horizontal scrolling and I must have the banners background color extend to match the full length of the DIV. How do I have the DIV expand its width to the entire width of the TABLE and why is the TABLE not affecting the width of its parent DIV?
thank you.
See my jsfiddle
Removing the width: 100% and adding display: inline-block to the container element should do it. http://jsfiddle.net/rqJQg/6/
Related
I want to make element scrollable if it's content is becoming too large to fit in parent's max-height. The problem is that it overflows parent instead of adding scrollbar.
I know that providing height or max-height in pixels to element would fix the issue but I cannot do that because the height of the element is not known.
Link to the code: https://codesandbox.io/s/scrollable-height-ewfbmo?file=/src/App.js
(I want purple section to be scrollable)
So to scroll the purple region:
Just add overflow: auto to the .body class (the parent of the purple region)
I forked your code-sandbox:
https://codesandbox.io/s/scrollable-height-forked-9hvrpy?file=/src/styles.css
Im googling, coding but cant find a solution for my problem. I have container set to 100% height which contains another 100% container and also two divs with fixed height and that messes up the whole idea of having all the content in one screen with no need to scroll.
https://jsfiddle.net/6jk91tnq/
It seems that you're under the impression that height: 100% means fill the space, however it means "Set the height to 100% of its parent container".
In your example, you have two container divs with 100% height. The one on the outside has 100% height of its parent (body). The inside container has 100% height of its parent, which is the previous container - in essence you have an inside div that you're telling "match the height of the entire page".
If you want something to stick to the bottom of a page (and disregard all other elements), you can take it out of the flow and forcefully position it using position: absolute; bottom: 0;
The outside container should be the only one with 100% the child div should be less than that
<div style="height:100%">
<div style="height:90%;"/*or any value <100%, that is appropriate for your design */></div>
<div>
This means that the outer div is going to be the screen size, and the inner div is going to be 90% of whatever the parent div is,
If you would write something like this
<div style="height:50%">
<div style="height:100%"></div>
<div>
The container div would only cover half of the page but the inner div will cover all the height of the outer div, which 100% of its parent size.
By this i mean you should lower the height size of the first child div to achieve a one pager in your fiddle,
I have a div with an image and a label in it. The label must be ontop of the image so i made the outer container div relative.
But i also want that the container div has the same width as the image. So i can set a 100% width on my label. I also don't know the width of the image before hand. This is loaded dynamically.
But the container div always has a 100% width set to it. Is there any way to let it have the width of the image that is inside?
Example: http://jsfiddle.net/sbNZu/391/
Do one of the following rules to your container:
Add a display:inline-block
Add float:left
Either will shrink the container div to fit the contents.
I've looked for an answer and found some but they look to only be for divs with background colours, not background images with corners etc. My example is at (removed)
I want the menu and the "page" to be the same height 100% of the time. No matter which one is larger ie if the page has more content the menu has to stretch and vice versa.
As you can see, the shadows etc for the background images are divs absolutely positioned within the respective divs and then z-indexed lower than the container...
Am I going about this the wrong way? Insight would be very helpful, thanks in advance!
Set the div's height property to 100% of it's parent, which will be the body of the document or a containing div. Then simply set margins for the top and bottom.
#menuDiv {
height: 100%;
margin: 100px 0 25px 0;
}
Same for the content div. The div's size properties won't change for the background image. Although it might be better for you to put both divs in a containing div with both children (menu and content) set to 100% of it's parent, then set a minimum height on the containing div which is equal to the height of the menu. If you don't do this and the content div is smaller it'd look ugly.
I'm trying to have an image inside of a position:fixed div respond to the width of the browser.
The img is inside of a 100% width div with a margin of 100px on both sides, and those are both inside of a div with a max-width of 750px, all inside of a div that is fixed position.
Once the browser is resized to something less than 750px, normally, the image would begin sizing down automatically. It seems that since it's in a fixed position that it is just getting cut off. Is there a way around this, with the div still remaining fixed?
You'll want to give the image element a percentage width e.g. img{width:100%;}
http://jsfiddle.net/jg6va/