I have a blog with some content in it (divs). When i click a div a lightbox-like article appears. It has a transparent black container and on the middle an article. The container has position absolute , width and height auto top 0 and z-index over all content beneath
Its all ok until i resize the window. The the content of the body, the one underneath the article, goes beneath it. i want to make the container resize and stretch to cover that content too. And also to be able to scroll. Help please.
You can set the height and width of the box using vh and vw units which are set in terms of the height and width of the window. http://www.w3schools.com/cssref/css_units.asp
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
Please check this example that I made:
HTML:
<body class="pcon">
<div class="ccon">
</div>
</body>
CSS:
.pcon{
border:solid;width:100%;background-color:pink;
}
.ccon{
width:2000px;height:300px;background-color:green;
}
https://jsfiddle.net/fpv3tfu6/4/
This is for the site that I am making, I have a div with a fixed size that might not be accommodated by the parent div if the user decided to resize the window, since I am using a width of 100% and my div has a fixed size of 1200px and if the user decided to resize the window, the same scenario happens since the parent will have to adapt to the new width.
To emulate what the scenario is, I have a parent div with 100% on width and it has a child with a div width of 2000px. As we see, the border doesn't completely "cover" the green box. What should i do to make the parent's border contain the div with a bigger size due to possible resizing?
The solution that I thought of is to use min-width (since the parent's width will be bigger than the pre-specified div's width).
Demo
I've got a page with three sections that are 100% width and 100% height of the body with the exception of one section which is 200% the width of the body. On this section I'd like to be able to scroll horizontally to see the rest of the div, but I don't want the rest of the sections to have white space to the right of them as they currently do. If I set body{ overflow-x:hidden;} I can't scroll horizontally on the wider div. Any suggestions?
You need to encase the width:200%; div inside a container that has 100% width, so that it stays within the body, then set the container to overflow-x:auto;
Here is a jsFiddle to show what i mean.
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/