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;
}
Related
I'm trying to make a fixed position div stuck to the bottom of the page, that has the starting height, 70% of the screen ( like vh ).
I will make it resizable with jQuery resizable.
The problem is that if I apply height: 70vh or height: 70%, the div resizes when the user resizes the browser height, and I want to keep it the same.
Any idea what to do?
div {
position: fixed;
display: block;
bottom: 0;
width: 500px;
height: 70vh;
background-color: red;
}
<div>
</div>
View the snippet in full page.
vh or % will be relative to the height of the viewport or screen height. So we need to set the initial height of the div with JavaScript on DOM load.
Next (The resizing part) can be done with CSS resize property.
**PS: In the div bottom right corner you can see the resize icon and do the resizing.
document.getElementById("demo").style.height = window.innerHeight*.7+"px";
div {
position: fixed;
bottom: 0px;
width: 500px;
background-color: red;
resize:vertical;
overflow:auto;
}
<div id="demo"></div>
You can add min-height to div so that it will not resize itself beyond a specific height.
Like this
div {
position: fixed;
display: block;
bottom: 0;
width: 500px;
height: 70vh;
min-height: 500px;
background-color: red;
}
<div>
</div>
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
I want a DIV insider another one (which I don't want to change for some reasons) to be
centered horizontally
width: 70%, but not more than 800px and not less than 300px
height: 100%, but 50px margin at the top, and 20px margin at the bottom
displayed correctly with IE9+, modern desktop browsers and iOS 6+ Safari
I could get it working for all properties but the height using this CSS ("child" is target DIV):
#child{
width: 70%;
height: 100%;
max-width:800px;
min-width:300px;
margin-top:50px;
margin-bottom:20px;
margin-left: auto;
margin-right: auto;
display:block;
}
The height margins are respected, but the content is stretched, and so a scroll bar appears, what want to prevent.
Please see a full example at this Fiddle.
Do you have any idea how this could be fixed?
I know that there are many questions about "how to achieve 100% height and margins", but I didn't find one that considered a variable width.
That's because the margins are added to the height of the element.
I updated the fiddle by adding padding to the parent and removing margin to the child.
I also used the box-sizing property to make it take the padding into account when computing the height of the parent :
#parent{
width: 100%;
height: 100%;
padding-top: 50px;
padding-bottom: 20px;
box-sizing: border-box;
}
http://jsfiddle.net/u6we2axp/2/
You can use absolute positioning to get the height right:
#child {
position: absolute;
top: 50px;
bottom: 20px;
left: 0;
right: 0;
width: 70%;
min-width: 300px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
This requires adding position: relative to #parent but if it is the only child of the body then you can avoid it. This takes care of the which I don't want to change for some reasons part of your question.
Demo Here
I am trying to achieve that the width of the div is always 50% of the body. E.g. when I resize the window, the div should become smaller.
But the div size applied does not work at all when % is used.
See here
What I don't want to do is to be forced to specify a width of body. Since that is exactly, that should be variable
CSS
.someclass{
width: 50%;
height: 50%;
background-color: #444444;
}
body {
background-color: cyan;
}
HTML
<div class="someclass"> </div>
Add a position absolute... http://codepen.io/anon/pen/jlnIy
.someclass{
width: 50%;
height: 50%;
position: absolute;
background-color: #444444;
}
I am trying to position an div element at the bottom right of an image, that is inside a container element. I set position relative to the container, and position absolute to the inner div, but it does not work. Here is the (http://jsfiddle.net/ZC84G/). Please, help.
<div class="container">
<div class="icon"></div>
<img src="/images/someImage.png" />
</div>
CSS:
body {
background-color: black;
}
.container {
position: relative;
}
.container img {
max-width: 75%;
max-height: 80%;
}
.icon{
background-image: url('http://icons.iconarchive.com/icons/iconfactory/star-wars-lego/32/Biggs-No-Helmet-icon.png');
width: 31px;
height: 31px;
position: absolute;
bottom: 5px;
right: 5px;
}
This is because by default div has block display mode, and it's width is 100% of the parent container. Try to add display: inline to .container
.container {
position: relative;
display: inline;
}
Here's the corrected jsfiddle: http://jsfiddle.net/ZC84G/4/
Your container div has no width and height set. And since a <div> is a block-level element by default, it will be set to 100% width ie expand to however much horizontal space is left.
Plus, you're also constraining your image size:
max-width: 75%;
max-height: 80%;
If you replace the img CSS with:
max-width: 75%;
max-height: 80%;
It works fine, and as expected: http://jsfiddle.net/ZC84G/3/
I've modified your CSS on the image a bit.
Basically, I set it to scale properly to the size of its container, and now it sits where I think you wanted it. The way you could find this yourself in the future would be to inspect the element by using right click from your browser, and looking at the size of the different elements to see what was expanding larger/smaller than it should.
.container img {
max-width: 100%;
height: auto;
}