There is a way to set max-height in %, but is here any way to set DIV max-height, so it would be 100px smaller than window height with only CSS?
It must not be a fixed layout, user must be able to scroll page vertically, but DIV always should be resized to window height - 100px. Is this possible, or will I have to use JS for that?
Yes:
#specificElement {
height: calc(100vh - 100px);
box-sizing: border-box;
}
This uses the CSS calc() function to subtract 100px from 100vh (1vh being one percent of the view-port's height) and uses the result as the value of the height property.
The box-sizing forces the browser to include padding, and borders, in the calculated height of the element.
Obviously use a relevant selector for your use-case.
References:
calc().
CSS lengths.
#specificElement {
height: calc(100vh - 100%);
min-height: calc(100vh - 100px);
}
set min height so that your dyanmic content should not get effect and give height in percentage for dymanic result.
Related
I have an image which width should be as large as possible and I want it's height to not exceed the height of the parent while also maintaining the aspect ratio of 16:9. The issue right now is, it works well till the screen size is 1591px, if it gets bigger than that, the height exceeds and the vertical scroll bar appears. I don't want that behavior. How can I achieve that?
the scrollBar appears because of the overflow you can do 2 things
use the "overflow: hidden;"
body{
overflow: hidden;
}
you can use max-width to determine the max-width of the element and set it on both of the elements
I hope it was helpful 😁
UPDATE: the original answer assumed from the question that the image was an HTML img. The solution was to set width to 100% [of its container] and height to 70vh and use object-fit.
However, it is not an img it is a canvas.
The required aspect ratio is known to be 16 / 9. This snippet therefore sets the max-width to 100% (of whatever is the container) and the max-height to 70vh.
This way there can never be any overflow and the canvas will be as big as it can be within those constraints.
body {
width: 100vw;
margin: 0;
}
canvas {
max-width: 100%;
max-height: 70vh;
aspect-ratio: 16 / 9;
background: green;
}
<canvas width="1600" height="900"></canvas>
Let's say I've two sibling elements A and B. I want to set B's height fixed to (container's height - A's height). So, child elements of B won't increase the height of B.
I've tried using Height: 100%;, but it is taking container's height, not (container's height - A's height)
Sample angular app:
https://stackblitz.com/edit/angular-ivopeh
B's height should be fixed to (container's height - A's height) = (50px -30px) = 20px. So, if child element of B has height more then 20px, it should restrict its height to 20px and add scrollbar to it
I Would place this as a comment if I could.
To add a scrollbar to section b if the children are bigger than 20px you could overflow-y:scroll on section b(more documentation on overflow below). this way you only have to take care of the height which could be solved by adding flexbox or fixed values.
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
if A has a fixed height then changing class B as follows should do it;
.B {
display: block;
height: calc(100% - 20px /* A's fixed height. can be percentage, pixel, em, rem etc. */);
overflow-y: auto;
}
display: block; is required for any height value set on B to be effective.
overflow-y: auto is required to display scroll bars in case B's content overflows.
here is a working demo: https://stackblitz.com/edit/angular-mw3ugb
I have a div, and I am given 3 values for the width of the div. The normal width of the div is 120px, the min width of the div is 90px, and the max width of the div is 150px. I guess I am asked to apply these values based on the width of the screen. I would like to know how to write css for this?
I have tried below code, but it seems my div is always 120px.
.myDiv {
width: 120px;
max-width: 150px;
min-width: 90px;
}
Should I use media query?
Max-width and min-width as px will only have an impact if your width is used with percents %
(or other window based width like vw).
In your case I think indeed the best thing to do is use media queries.
I'm trying to make one div with height 100% - 130px;
Code is:
height: calc(100% - 130px); // Here 80px of TOC-header and 50 of TOC-footer
height: -moz-calc(100% - 130px);
height: -webkit-calc(100% - 130px);
When I edit it with browser console(Inspect Element) it works well. But when I apply the same in code it shows calc(-30%); And due to that the contents get no visibility.
I've attached a screenshot below of firebug. Really confusing moment.
Any help will be appreciated. Thanks.
Saying height: 100% refers to the same height of it's parents height.
In your case, .element1 has a height of 100% which is not recognizable. Set a real height to this element and you will see the expected output.
For example:
.element1 {
height :200px;
}
DEMO
Wrap your item in another div, give it 100% height with a padding top or bottom of 130px or padding bottom and top of 65px. This way you can even position your element vertically.
I want to do this.
I have changing wrapper widths (sometimes it's 100%, sometimes it's a fixed width). Sidebar content is designed to be fixed 250px width, content should be flexible. But when I set content to be { width: 100%; } it just don't fits it's overflowing content.
CSS3 calc can do this.
#content {width: calc(100% - 250px);}
#sidebar {width: 250px;}
Make sure that the browsers you need support this property. Here are the supported browsers. and don't forget the browser-specific prefixes. Like so:
#content {
width: 700px; /* Fallback for older browsers */
width: -webkit-calc(100% - 250px);
width: -moz-calc(100% - 250px);
width: calc(100% - 250px);
}
I highly advise you to use border-box to work with calc, it makes everything a lot easier.
* {box-sizing: border-box;}
If I understand what you are looking for, you can't do it by css/html alone. I'd use javascript to get the wrapper width, then subtract the width of the fixed elements and asign that to the value of the content div. See below:
var wrapW = document.getElementById("wrapper").clientWidth;
var contW = wrapW - (sideWidth + marginWidths);
document.getElementById("content").style.width = contW+"px";
Obviously in the example above you'd be inserting a fixed value for sideWidth and marginWidths...
When you try to increase the content size.. you need to increase the size of the outermost div also. Otherwise content div and fixed div will not align smoothly. You can do it by script.
Maybe the questing had a bad wording, anyway, just I implemented with CSS.
content div can be 100%, but it's margin-right should set to (siderbar.marginLeft + sidebar.width + sidebar.marginRight). With 100% it has an explicit width, thus it will fit it's content.
See eppz.eu/blog between 660px and 960px.