I have a sidebar menu and i have a toggle button, but i have a Div that is the parent div of the sidebar, and the height is set to 'auto' by a Node Package.
<div _ngcontent-cle-1="" class="sidebar in collapse" style="overflow: visible; transition-duration: 500ms; height: auto;" aria-expanded="true" aria-hidden="false">
</div>
if the height was set to 100%, the div goes to the bottom of the screen, which is what is needed. But because of 'auto' being forced in then the height only goes as high as the amount of items within the .
To counter this I have tried to add a child
to force the height of the parent div to the bottom.
I have tried multiple css tricks such as display: table and display: table-row, but the div just stays at 0px height no matter what.
Also note: any height styling set in the parent div class, just gets over-ridden.
EDIT it is not a duplicate of another answer, the reason for this is because it has clashing styling from another, which is shortening the height, and i wanted to over-ride it or make the child element be 100% height, thus forcing the parent to extend because of the auto height. Please read the question next time.
This was solved because an Angular2 Directive containing :
this._renderer.setElementStyle(this._el.nativeElement, 'height', 'auto');
was over-riding the height on this css:
.sidebar {
background-color: #0080ff;
top: 0;
left: 0;
padding-top: 50px;
height: 100%;
float: left;
position: fixed;
width: 84px;
}
Solution
.sidebar {
background-color: #0080ff;
top: 0;
left: 0;
padding-top: 50px;
height: 100% !important;
float: left;
position: fixed;
width: 84px;
}
The !important attribute makes sure the 100% attribute cannot be overriden. Suggested by #DamianBartosik
Related
I have a div (div1) inside some other divs. Now I want this div to have the same width as the body (take up full width of display), but always have the same height and position as its parent (div2). I've tried using position: absolute; on this div (div1). Then I can either
set body to position: relative; and have div1 take up 100% width, but now I'm having trouble making the height always follow div2.
or set the parent (div2) to position: relative; and have div 1 take up 100% height, but now I can't make it follow the width of body.
It would be cool if CSS had the option of saying:
.div1 {
height: 100%(.div2);
width: 100%(body);
position: 0(.div2);
}
Or something like that
JSFiddle with the relevant bits: https://jsfiddle.net/Hamleyburger/fqe5o46c/1/#&togetherjs=K02DaSO2nR
What I want is the div ".selectable" to have a div (inside?) that shows on hover and fits the heights of ".selectable" (parent) and the entire width of the body.
Extra, maybe relevant info:
I'm using Bootstrap and (Jinja2) templating. All the divs so far are taking their base widths from a wrapper container (.main) in my base template that I've set to be (responsively) narrower than body. If I were to remove .main
div I would have to set width on many individual divs. That would solve it (I could make all the divs that aren't div1 narrower), but it wouldn't be very DRY. I'm using SASS, if that helps.
It's possible to force a div to fill the whole viewport width using vw. It's a bit weird though:
body,
html {
margin: 0;
padding: 0;
}
.outer {
width: 300px;
height: 300px;
background-color: #eeeeee;
margin: 0 auto;
position: relative
}
.inner {
width: 100vw;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="outer">
<div class="inner"></div>
</div>
I'd recommend to make your outer div full width and give the inner one a specific width:
body,
html {
margin: 0;
padding: 0;
}
.outer {
width: 100%;
background-color: #eeeeee;
position: relative
}
.inner {
width: 300px;
height: 300px;
margin: 0 auto;
background-color: rgba(0, 0, 0, 0.1);
}
<div class="outer">
<div class="inner"></div>
</div>
When you set the width/height to 100% for divs, they should take the dimension of their parent element.
I see this is the case for the width but not the height. The elements in question are as such where fm is the parent and fm_xxx are the children.
#fm{
position: relative;
text-align: left;
width: 370px;
height: 100%;
}
#fm_tags{
position: relative;
width: 100%;
height: 100%;
}
#fm_arcmarks{
margin-top:10px;
position: relative;
width: 100%;
height: 100%;
clear: both;
}
#fm_space{
height: 10px;
width: 100%;
height: 100%;
clear: both;
}
for this html
<div id = 'fm'>
<div id = 'fm_tags'></div>
<div id = 'fm_space'></div>
<div id = 'fm_arcmarks'></div>
</div>
To see the code live go here:
https://frozen-dusk-2587.herokuapp.com/
and click on FAVS
There are two ways to make height work in CSS.
For elements that are in the normal "flow" of the document, height needs to be set all the way up to and including the HTML element.
In your code, you have set the height of the main #fm div to 100%, but 100% of what? Percentages are always based on the parent element and your code doesn't show the height set on the parent element of #fm
Add:
html, body {height:100%;}
to your code and it will work. But note in the snippet below, that I've changed the child div elements to have heights of 33%, rather than the 100% you initially had. This way each will take up 1/3 of the parent div which is taking up 100% of its parent (body) height, which is taking up 100% of its parent (html) height:
html, body {height:100%;}
div {border:1px solid black; }
#fm{
position: relative;
text-align: left;
width: 370px;
height: 100%;
}
#fm_tags{
position: relative;
width: 100%;
height: 33%;
}
#fm_arcmarks{
margin-top:10px;
position: relative;
width: 100%;
height: 33%;
clear: both;
}
#fm_space{
height: 10px;
width: 100%;
height: 33%;
clear: both;
}
<div id = 'fm'>div
<div id = 'fm_tags'>div</div>
<div id = 'fm_space'>div</div>
<div id = 'fm_arcmarks'>div</div>
</div>
Take the element out of the normal "flow". This can be done with float:value or by setting position:absolute or position:fixed. It also applies to <table> and <tr> elements (as special cases).
When elements are taken out of the normal flow of the document, they are no longer contained by their parent, so parent height no longer matters and the elements are now free to use the height you've specified.
It looks like you need to set
body_main to height: 100%
as I have checked the debugger on your dev site and html and body are already set to 100%.
The entire chain must be set to 100%. So when you omit body_main in the height chain. It looses it's height and so does its child elements.
I am attempting to create a game where the first thing that the user sees is a start-menu modal on top of a game background.
Basic HTML:
<div class="game-board">
<div class="menu"> </div>
</div>
CSS:
html, body{
min-height:100%;
}
.game-board{
background-image: url(../images/sand.png);
width: 1260px;
height: 100%;
}
.menu{
position: absolute;
width: 400px;
right: 0;
top: 30%;
left: 31%;
background: whitesmoke;
border-radius: 4px;
}
I expected the above code to show the background-image in the background, and then somewhere near the middle of the image, the "modal" is above the background. However, for some reason that I'd love to know, the parent div .game-board is collapsed with no height and thus no background image, but the modal appears fine. Why is this?
Rule - For height in percentage to work in CSS, the parent element should have a height that can be calculated.
For example, when you say .game-board should have a height of 100% - then the question that arises is 100% of what? Because the parent element body in this case, does not have height specified explicitly. Min-height does not work because that does not fix the height of the element to a particular value on a particular view port. For example, if the viewport has height 100px then min-height: 100% could mean anything from 100px to infinity. Thus the height rule on .game-board doesn't work.
To fix this, change min-height to height
html, body {
height: 100%;
}
Also, the absolutely positioned menu, needs to have a height if there is no content as of yet inside it, else it would not appear.
Here is a working fiddle. http://jsfiddle.net/8dhfac8w/
.game-board needs a fixed height. .menu can do with a variable height so long as it's contained by a fixed height parent. This works (Fiddle).
html, body{
min-height:100%;
}
.game-board{
background-image: url("http://trikkiworld.com/images/bg/bg_sand/25012011/sand006.jpeg");
width: 200px;
height: 200px;
}
.menu{
position: relative;
width: 50%;
height: 50%;
top: 25%;
margin-left: auto;
margin-right: auto;
display: block;
background: whitesmoke;
border-radius: 4px;
}
I'm not too sure if this can be achieved in pure CSS, though it would be preferable. I have an image:
<img src="#" class="article-thumb">
CSS:
.article-thumb {
height: 55%;
}
So, how can I make the width to equal whatever the height is? I'm trying to achieve an image that's a perfect circle (so I obviously have some border-radius applied), and that can also scale to fill as much as it's container (actually to fill 55% of it's container in height to be specific)
Here is one way of doing it which involves some extra mark-up so it may not appeal to everyone.
Let .wrap be some parent, containing block with some width and height (can be in % values).
Define an inline-block child container, .framer, whose width is a % of the parent, for example, 23%.
Within .framer, place a square image .aspect-setter (dimensions not critical, just keep it small) and set the width to 100%. The image will then scale to the width of .framer and .framer will shrink-to-fit the image (because it is an inline-block) and keep its intrinsic shape (because height is auto). Use visibility: hidden to hide the image while keeping it in the content flow.
Define .avatar-container as an absolutely positioned element and use the offsets to scale it to fit .framer. Since .framer is square, .avatar-container will also be square.
Using an extra image is not overly elegant, but it gets the job done.
.wrap {
width: 400px;
height: 250px;
border: 1px dotted gray;
}
.framer {
display: inline-block;
position: relative;
border: 1px dashed blue;
width: 23%;
}
.aspect-setter {
vertical-align: top;
visibility: hidden;
width: 100%;
height: auto;
}
.avatar-container {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: 50%;
background-image: url('http://www.wisportsfan.com/siteresources/images/defaultavatar.jpg');
background-size: cover;
}
<div class="wrap">
<div class="framer">
<img class="aspect-setter" src="http://placehold.it/100x100">
<div class="avatar-container"></div>
</div>
</div>
How can I have a div with 100% height that has a particular aspect ratio, e.g. 2:3?
For example, if the outer element has a height of 900px, the width of the inner element should be 600px, but this should be responsive.
I don't want to use any JavaScript for this.
Using the CSS3 flexible box model would be fine.
If you are targeting modern browsers that support CSS3, you can try the following.
Consider the following HTML snippet:
<div class="wrapper">
<div class="inner">Inner content...</div>
</div>
and apply the following CSS rules:
html, body {
height: 100%;
}
body {
margin: 0;
}
.wrapper {
background-color: lightblue;
height: 100%;
}
.wrapper .inner {
margin: 0 auto;
background-color: beige;
height: 100%;
width: 66.6666666666vh;
}
The .wrapper element takes up 100% of the view port height because I have set
height: 100% on the body and html elements.
The inner wrapper .inner has a height: 100% and fills up the parent block.
To set the .inner width, use the viewport-percentage length vh that scales with the height of the parent block.
In this example, 66.66vh means 66.66% of the vertical height, which corresponds to a 2:3 aspect ratio (width:height).
See demo at jsFiddle
Reference: http://www.w3.org/TR/css3-values/#viewport-relative-lengths
Browser Compatibility
The vh unit and other vertical percentage lengths have pretty good support with the latest browsers, see the reference below for more details.
See reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/length#Browser_compatibility
Alternative Approach Using a Spacer Image
Consider the following HTML:
<div class="ratio-wrapper">
<img class="spacer" src="http://placehold.it/20x30">
<div class="content">Some content...</div>
</div>
and apply the following CSS:
.ratio-wrapper {
position: relative;
display: inline-block;
border: 1px solid gray;
height: 500px; /* set the height or inherit from the parent container */
}
.ratio-wrapper .spacer {
height: 100%; /* set height: 100% for portrait style content */
visibility: hidden;
vertical-align: top;
}
.ratio-wrapper .content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 20px;
}
The .ratio-wrapper container has two child elements, an img.spacer and div.content.
The image as a portrait aspect ratio, for example, 20x30 (wxh) and is set to expand to fill the height of the parent container using height: 100%. The image is hidden from view but retains its space in the parent block.
The .content element is positioned absolutely to fill the parent container and can contain any content. Because .content is constrained in height and width, the content could overflow in some cases, so setting overflow: auto may be appropriate.
See demo at: http://jsfiddle.net/audetwebdesign/BVkuW/
Related question and answer:
In Fluid Container, Can I Make Elements as Tall as they Are Wide?
You can do this by sticking a 2px by 3px image and an inner div as siblings into an outer div which has display: inline-block; applied. Now when you set the image to have a height of 100%, and you absolutely position the inner div to be as high and wide as its ancestor, you can set the height of the outer div, and the width of all elements involved will be exactly equal and based on the aspect ratio of the image.
Here's a jsFiddle demonstrating this approach.
HTML
<div>
<div>2 by 3</div>
<img src=".../twobythree.png" />
</div>
CSS
body > div {
height: 300px;
position: relative;
display: inline-block;
}
img {
display: block;
height: 100%;
}
div > div {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}