How to set div height dynamically?
PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language.PHP is a widely-used, free, and efficient alternative to competitors such as Microsoft's ASP.
Fast, flexible and pragmatic, PHP powers everything from your blog to the most popular websites in the world.
Documentation
A good place to start is by skimming through the ever-growing list of frequently asked questions (with answers, of course). Then have a look at the rest of the online manual and other resources in the documentation section.Mailing Lists
There are a number of mailing lists devoted to talking about PHP and related projects. This list describes them all, has links to searchable archives for all of the lists, and explains how to subscribe to the lists.User Groups
Chances are that there is a User Group in your neighborhood, which are generally a great resource both for beginners and experienced PHP users. Check out the User Group listing on PHP.ug to see if there is one close by.
<!DOCTYPE html>
<html>
<head>
<style>
#header_div,#bodycontent_div,#footer_div{
border:1px solid #000;
margin: 5px;
padding: 10px;
color: #000 !important;
}
#header_div{background-color:#E6FF00; text-align: center; }
#bodycontent_div{background-color:#00FF6F; }
#footer_div{background-color:#00D3FF; text-align: center; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div>
<div id="header_div">
<h1>How to set div height dynamically?</h1>
<p>PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language.</p>
<p>PHP is a widely-used, free, and efficient alternative to competitors such as Microsoft's ASP.</p>
<p>Fast, flexible and pragmatic, PHP powers everything from your blog to the most popular websites in the world.</p>
</div>
<div id="bodycontent_div" class="bodycontent_div">
<h2>Documentation </h2>
<p>A good place to start is by skimming through the ever-growing list of frequently asked questions (with answers, of course). Then have a look at the rest of the online manual and other resources in the documentation section.</p>
<h3>Mailing Lists</h3>
<p>There are a number of mailing lists devoted to talking about PHP and related projects. This list describes them all, has links to searchable archives for all of the lists, and explains how to subscribe to the lists.</p>
<h4>User Groups</h4>
<p>Chances are that there is a User Group in your neighborhood, which are generally a great resource both for beginners and experienced PHP users. Check out the User Group listing on PHP.ug to see if there is one close by.</p>
</div>
<div id="footer_div">
<div> MySQL is the most popular database system used with PHP.</div>
</div>
</div>
</body>
<script>
function assign_body_height(){
//Dynamically assign height (Only for PC)
var nav_header = $("#header_div").height();
var nav_bodycontent = $("#bodycontent_div").height();
var nav_footer = $("#footer_div").height();
var screen_height = window.innerHeight|| document.documentElement.clientHeight || document.body.clientHeight;
if((nav_header + nav_bodycontent + nav_footer + 95) < screen_height)
{
//alert(screen_height);
var newHeight = screen_height - (nav_header + nav_footer + 95) + "px";
$(".bodycontent_div").css("height", newHeight);
}
else{
//alert("more height");
var newHeight = "auto";
jQuery(".bodycontent_div").css("height", newHeight);
}
}
$(document).ready( function()
{
assign_body_height();
});
</script>
</html>
<html>
<head>
<style>
#header_div,#bodycontent_div,#footer_div{
border:1px solid #000;
margin: 5px;
padding: 10px;
color: #000 !important;
}
#header_div{background-color:#E6FF00; text-align: center; }
#bodycontent_div{background-color:#00FF6F; }
#footer_div{background-color:#00D3FF; text-align: center; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div>
<div id="header_div">
<h1>How to set div height dynamically?</h1>
<p>PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language.</p>
<p>PHP is a widely-used, free, and efficient alternative to competitors such as Microsoft's ASP.</p>
<p>Fast, flexible and pragmatic, PHP powers everything from your blog to the most popular websites in the world.</p>
</div>
<div id="bodycontent_div" class="bodycontent_div">
<h2>Documentation </h2>
<p>A good place to start is by skimming through the ever-growing list of frequently asked questions (with answers, of course). Then have a look at the rest of the online manual and other resources in the documentation section.</p>
<h3>Mailing Lists</h3>
<p>There are a number of mailing lists devoted to talking about PHP and related projects. This list describes them all, has links to searchable archives for all of the lists, and explains how to subscribe to the lists.</p>
<h4>User Groups</h4>
<p>Chances are that there is a User Group in your neighborhood, which are generally a great resource both for beginners and experienced PHP users. Check out the User Group listing on PHP.ug to see if there is one close by.</p>
</div>
<div id="footer_div">
<div> MySQL is the most popular database system used with PHP.</div>
</div>
</div>
</body>
<script>
function assign_body_height(){
//Dynamically assign height (Only for PC)
var nav_header = $("#header_div").height();
var nav_bodycontent = $("#bodycontent_div").height();
var nav_footer = $("#footer_div").height();
var screen_height = window.innerHeight|| document.documentElement.clientHeight || document.body.clientHeight;
if((nav_header + nav_bodycontent + nav_footer + 95) < screen_height)
{
//alert(screen_height);
var newHeight = screen_height - (nav_header + nav_footer + 95) + "px";
$(".bodycontent_div").css("height", newHeight);
}
else{
//alert("more height");
var newHeight = "auto";
jQuery(".bodycontent_div").css("height", newHeight);
}
}
$(document).ready( function()
{
assign_body_height();
});
</script>
</html>
No comments:
Post a Comment