How to span a div 100% without using position absolute?
Question
This is a big problem for me, I am working on tackling scaling problems between different devices. It would be nice, if I just had a multiplier that I echoed in, unless javascript variablses can be used in place of the values for example width, height, font-size etc...
For example the banner of stackexchange is probably using position absolute to go 100% across the screen, but if you were to use div, with width 100% and floated left, there would be some space on the ends of the element.
So when I see these pages made for mobile devices, they are separated by sections using large font, and they seem to responsively scale.
How do you achieve the effect of position absolute without absolute values for width/height?
I have used PHP to echo in modified variables before the page loads.
For example
<?php
// get device screen height width via ajax post
$width = $POST['value'];
$height = $POST['value'];
if(($width/$height)>1) {
$multiplier = 10;
}else {
$multiplier = 1;
}
// process values on page
$variable_height = $multiplier*30;
$px = "px";
$concat_height = $variable_height.$px;
$new_height = $concat_height;
?>
<!DOCTYPE HTML>
<head>
<style>
.full-span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: <?php echo $new_height; ?>;
}
</style>
</head>
<body>
<div class="full-span">My height changes on device height</div>
</body>
Pretty messy sample, but I think you get the idea.
1 answers
solution1
0 2015-10-21 16:16:33
In terms of scaling, you could try...
HTML
<div class="full-span">
<h1>Content</h1>
</div>
CSS
.full-span
{
background: url(..img/whatever.png);
background-size: contain;
height: 10%; /* or whatever */
max-height: 200px; /* or whatever */
}
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.