Response title
This is preview!
How to get the actual height of a parent div?
in Getting Started
•
10 years ago
If I have a child element with some margin established, its parent won't return its actual height ( wont't count the child's margin, I mean) when using the command .outerHeight(), unless I establish either (not all) of the following properties to the parent div:
border:1px solid;
overflow:hidden
display:table-cell;
Why is that? Which of these properties should I use (..and why '-')? Should I do something different? Ty in advance. Here's the code:
border:1px solid;
overflow:hidden
display:table-cell;
Why is that? Which of these properties should I use (..and why '-')? Should I do something different? Ty in advance. Here's the code:
- <!DOCTYPE HTML>
<head>
<title>Sample</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="js/jquery-ui-1.10.0.custom.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.form { margin:2em; }
.fieldcontain label{
width:8em;
text-align:right;
display:inline-block;
margin: 0 0.5em 0.8em 0;
}
#login{
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var alturaAtual = $('#login').outerHeight()
alert(alturaAtual)
})
</script>
</head>
<body>
<div id="login" style="width:25em;">
<form class="form" action="#">
<div class="fieldcontain">
<label for="username">User Name</label>
<input type="text" name="username" id="username"/>
</div>
<div class="fieldcontain">
<label for="senha">Password</label>
<input type="password" name="senha" id="senha"/>
</div>
</form>
<br />dfdfdf
<br />dfdfdf
<br />dfdfdf
<br />dfdfdf
<br />dfdfdf
</div>
<input type="button" value="Click here" />
</body>
</html>
1