如何在不使用絕對位置的情況下跨度100％？

這對我來說是個大問題，我正致力於解決不同設備之間的縮放問題。這將是很好的，如果我只是有一個乘數，我呼應，除非可以使用JavaScript的變量來代替寬度，高度，字體大小等值...如何在不使用絕對位置的情況下跨度100％？

例如，stackexchange的橫幅可能使用絕對位置在整個屏幕上達到100％，但如果要使用div，寬度爲100％並向左浮動，則元素兩端會有一些空間。

所以當我看到這些爲移動設備製作的頁面時，它們之間用大字體分隔，而且它們似乎是響應式縮放。

如何獲得無絕對值的絕對位置對寬度/高度的影響？

我已經使用PHP在加載頁面之前在修改的變量中回顯。

例如

<?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>

相當混亂樣，但我覺得你的想法。

來源

2015-10-21 janicehoplin

一個div通過它的本質是100％的寬度 – Aaron

你明白我的雖然問，但？絕對位置是實際100％，你無法看到屏幕的邊緣。 – janicehoplin

然後從身體標記刪除邊距。 'body {margin：0}' – Aaron

在比例方面，你可以嘗試...

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 */ 
}

來源

2015-10-21 16:16:33 AdamJeffers

如何在不使用絕對位置的情況下跨度100％？

回答

相關問題