Set width and height to div as percent
Question
There are three divs , one of them is parent and two are children. The first child has always 100px height, the second child has rest of parent's height and both of them have parent's width. I want to use it to make my parent div responsive(fullscreen). There is my code for this task:
<html>
<head>
<style>
#parent{
position: relative;
background-color: red;
width: 200px;
height: 400px;
}
#firstChild{
margin-left: 5px;
margin-right: 5px;
position: absolute;
background-color: green;
width: -moz-calc(100% - 10px);
width: -webkit-calc(100% - 10px);
width: -o-calc(100% - 10px);
width: calc(100% - 10px);
height: 100px;
}
#secondChild{
margin-left: 5px;
margin-right: 5px;
position: absolute;
background-color: blue;
width: -moz-calc(100% - 10px);
width: -webkit-calc(100% - 10px);
width: -o-calc(100% - 10px);
width: calc(100% - 10px);
height: -moz-calc(100% - 100px);
height: -webkit-calc(100% - 100px);
height: -o-calc(100% - 100px);
height: calc(100% - 100px);
margin-top: 100px
}
</style>
</head>
<body>
<div id="parent">
<div id="firstChild"></div>
<div id="secondChild"></div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.fullscreen-min.js"></script>
<script>
document.addEventListener('mousedown', onDocumentMouseDown, false);
function onDocumentMouseDown(){
$("#parent").fullScreen(true);
}
</script>
</body>
</html>
it works great as a normal screen and as a fullscreen:
problem is when I tried to change first and second divs(constant 100px should be on bottom):
<html>
<head>
<style>
#parent{
position: relative;
background-color: red;
width: 200px;
height: 400px;
}
#firstChild{
margin-left: 5px;
margin-right: 5px;
position: absolute;
background-color: green;
width: -moz-calc(100% - 10px);
width: -webkit-calc(100% - 10px);
width: -o-calc(100% - 10px);
width: calc(100% - 10px);
height: calc(100% - 100px);
}
#secondChild{
margin-left: 5px;
margin-right: 5px;
position: absolute;
background-color: blue;
width: -moz-calc(100% - 10px);
width: -webkit-calc(100% - 10px);
width: -o-calc(100% - 10px);
width: calc(100% - 10px);
height: 100px;
margin-top: -moz-calc(100% - 100px);
margin-top: -webkit-calc(100% - 100px);
margin-top: -o-calc(100% - 100px);
margin-top: calc(100% - 100px);
}
</style>
</head>
<body>
<div id="parent">
<div id="firstChild"></div>
<div id="secondChild"></div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.fullscreen-min.js"></script>
<script>
document.addEventListener('mousedown', onDocumentMouseDown, false);
function onDocumentMouseDown(){
$("#parent").fullScreen(true);
}
</script>
</body>
</html>
the result is:
I'm not sure why it doesn't work when the first div's height is in percent and the second height is represented by the constant value. Can anyone explain what is wrong with my code and why doesn't it work?
1 answers
solution1
0 ACCPTED 2017-04-15 12:40:22
Add bottom:0px; to #secondChild
#secondChild{
margin-left: 5px;
margin-right: 5px;
position: absolute;
background-color: blue;
width: -moz-calc(100% - 10px);
width: -webkit-calc(100% - 10px);
width: -o-calc(100% - 10px);
width: calc(100% - 10px);
height: 100px;
margin-top: -moz-calc(100% - 100px);
margin-top: -webkit-calc(100% - 100px);
margin-top: -o-calc(100% - 100px);
margin-top: calc(100% - 100px);
}
Please let me know if this is what you needed.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.