At the site we are developing we have a main part (div main and mainholder) and this has always a maximum height of 770px. If the content in that part is higher then that it is cut of at the page, but we want the height to be automatically the same height as the content. So we do not want to give it a fixed height but it has to change automatically.
Change height: 100%; to min-height: 100%; for class .post
Related
Right now I have a sidebar that minimizes and expands along with the content beside it.
This is wrapped around a main wrapper component such that I can pass any content/component.
However, if the content is too long the sidebar height will not adjust. I have tried setting the height and min-height and it didn't do anything.
Things I have tried/have thought about:
Faux columns however I am not sure to implement it in my use-case.
Make the sidebar fixed however I am not sure how will the content (children of the main wrapper) will adjust if the sidebar is minimized/expanded.
Here is what is happening right now.
Here is the sandbox link: Sidebar Codesandbox
Make the sidebar fixed however I am not sure how will the content
(children of the main wrapper) will adjust if the sidebar is
minimized/expanded.
To achieve this you need to create a global state with useContext, to adjust two separate components. And then change the active class of the parent element .content-wrapper. This will be a trigger the .sidebar, .sidebar-btn and .content components. Make some css changes to the css file.
You can add height:max-content; for the text, and in the css declare a variable that is equal to the height, than in the sidebar height you can set height to the variable.
On the .content-wrapper class replace the height: 100vh; with min-height: 100vh
Add align-items: stretch;
From the .content class remove the height: 200vh;
This should make the sidebar grow its hight and match the height of the content.
The reason why your current styles are not working is you have fixed height for both the elements inside flex. For the content, the text is much more than 200vh height and is overflowing. Giving align-items: stretch; to the flex parent (in this case it is the content-wrapper) will increase the height of the children elements to either min-height of the flex parent or to the height of the child (content) with most height if the height of the child is greater than min-height of the parent. For your example, if the height: 200vh; is not removed from the content then this will be the child's height that is greatest and therefore the sidebar's height will stretch till 200vh and will not extend beyond 200vh.
I have decided to add a sidebar to the left side of all my pages in my website. The sidebar can either be concealed or visible, I do not want it to overlap the existing page.
If I were to have a sidebar as such, the content of the page tends to overflow with the container. I need the content to change according to its container width rather than the browser width.
I do not want to create a container for the content and set overflow-y to auto and make it stretch to browser height as I would need to do this for all my pages...
I have already tried changing the left margin on the body and adding a div with position: fixed as a sidebar.
How would I go about changing the content according to its container width rather than the browser width?
Try something like the approach below:
#content {
width: 80%; /* Adjust as need */
position: relative;
}
#content .children {
max-width: 100%; /* Or less, to keep the children from overflowing */
}
Note: I used imaginary ID and Class
Check this FIDDLE
This is like a mobile phone prototype where I have fixed height of 50px for header-div and footer-div.
I want the content-div to dynamically adjust its height according to the main-container (which here is acting as mobile screen size). Adjust in such a way that the content overflow should be scrollable in the visible content-div height only.
If I put header-div and footer-div height both 10% and content-div height 80%. So that it arranges according to the screen size. Trouble here is that the header and footer heights will vary according to screen sizes and as a result will make header-div and footer-div bigger/smaller in height.
This is why I have set a certain height for header-div and footer-div both that is 50px. Now I want the content-div to be adjusted in such a way that it dynamically changes its height in accordance to the main-container (parent div)
Appreciate any help. Thanks.
I tried this and I am not sure if you would like it that way but here's what I've got for you...
Change your CSS code for main-container to this.
.main-container {
width: 420px;
height: auto;
background-color: #f7f7f7;
}
change your css code for main-container
.main-container {
width: 420px;
height: 1.2em; //change as per your requirements
background-color: #f7f7f7;
}
Web Style Sheets
CSS tips & tricks
I have a dynamic-height container (its height is specified in relative measurements), inside of it, two elements - a header, and an img, e.g.:
<div class="item">
<header><h1>Title</h1></header>
<img ... />
</div>
I want the image to show in its entirety. Its css is set with height:100% .
Because of the height that the header takes, the image is clipped a little bit below (it is has an hidden overflown edge), where I want its height to auto adjust (become smaller) to fit inside the container.
There is a solution, where I use calc(100%-[height of header]) for the height of the image, but since calc is not supported in all browsers I was wondering if there is a different more supported solution for this.
Here is a jsfiddle:
http://jsfiddle.net/7xLo7mr6/
(Apply the class fix to the container to apply the calc fix)
Perhaps CSS flex could be your solution for this one:
http://jsfiddle.net/7xLo7mr6/9/
Using flex-direction: column; and applying a max-width to the container (allowing the image to fill in the rest of the height after the header text while not stretching the width) could potentially solve your issue, but might cause you more troubles depending on what you're ultimately after.
Another option: http://jsfiddle.net/7xLo7mr6/11/
apply height: 7%; to the header and height: 93%; to the image
Make the clipping happen at the top of the image instead of the bottom:
http://jsfiddle.net/7xLo7mr6/13/
Apply position: absolute; to the header, give it a background: white; and width: 100%;, then apply a position: relative; to the container so that the header applies a width 100% to the container and not the body.
If you just want the image to shrink when its container shrinks, you can give it a max-width of 100%, and that will stop your image from growing so large it exceeds its container.
.item img {
height: 100%;
max-width: 100%;
}
It might be important to note that declaring height: 100% does not make elements 100% of the height of their containers, it makes them 100% of their own intrinsic height. The heights of elements are determined by their content, not the other way around. Read a full explanation here: https://stackoverflow.com/a/5658062/4504641.
http://jsfiddle.net/ingridly/337wrgj8/1/
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.