CSS：在添加子div到它的div寬度增加

[！[enter] image [1]] [1]您好，我正在設計一個網頁。我已使用JavaScript代碼與屏幕寬度的頭格寬度如下CSS：在添加子div到它的div寬度增加

window.onload=getSize; 

function getSize() 
{ 
    var x=window.screen.availWidth; 
    var y=window.screen.availHeight; 

    document.getElementById("header").style.width=(x-50)+'px'; 
    document.getElementById("header").style.height=(0.2*y)+'px'; 
    document.getElementById("wrapper").style.width=(x-50)+'px'; 
    document.getElementById("wrapper").style.height=(0.6*y)+'px'; 

}

現在是什麼發生的事情是，當我加入孩子的div父DIV（頭）頭的寬度得到顯着提高，但我希望它根據顯示器尺寸

這裏仍然是固定的css文件

@CHARSET "ISO-8859-1"; 

#header { 
    margin: auto; 
    position : relative; 
    background-color: #009acd; 


} 

#logo1 { 
    position: absolute; 
    top: 5%; 
    left: 0.4%; 
} 

#caption { 
    position: absolute; 
    top: 50%; 
    left: 30%; 
    color: #FFFFFF; 
} 
#marquee{ 
    position: absolute; 
    top: -15px; 
    color: #FFFFFF; 
    left: 300px; 

    } 
#info{ 
    position: absolute; 
    top: 60px; 
    left: 1075px; 
    color: #FFFFFF; 
    } 
h3{ 
    position: absolute; 
    top: 90px; 
    left: 1000px; 
    color: #FFFFFF; 
    } 
#menu{ 
    position: absolute; 
    bottom: 0%; 
    left: 0.215%; 
    } 
#wrapper{ 
position: relative; 
background-color: #FFFFFF; 

} 
#videos{ 
    position: absolute; 
    top:0px; 
    left: 22px; 
} 
#studymaterial1{ 
    position: absolute; 
    top:148px; 
    left: 32px; 
} 
#downloads{ 
    position: absolute; 
    top: 315px; 
    left: 22px; 
} 
#wowslider-container1{ 
    left: 233px; 
    top: 10px; 

} 
.formoid-solid-blue{ 
    position: absolute; 
    left: 912px; 
    top: 12px; 

}

HTML

<!DOCTYPE html> 
<html> 
<head> 
<script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

來源

2016-02-23 Mayank Vaid

我想你必須首先設置子div的寬度，並且你必須將它們追加到父div。這樣的內部div的寬度不能擴展外部div的寬度，所以它不會擴大。 – dorado

但我已經給每個孩子寬度 –

所需的寬度嘗試'最大寬度和最大高度'而不是寬度和高度 –

要檢查

window.screen.availWidth

這是一個常數，等於寬度您的計算機屏幕的。例如，「1366px」

相反，你必須使用

window.innerWidth

，讓你的寬度瀏覽器窗口頁面加載時的感覺。

var x=window.innerWidth; 
var y=window.innerHeight;

希望這會有所幫助。 :)

來源

2016-02-23 08:20:22 dorado

nope仍然是一樣的:( –

不好意思，它保持不變，你可以改變屏幕大小，重新加載並檢查 – dorado

但是爲什麼空白區域出現在相鄰header div你可以從圖片中看到 –

你缺少單元（px/%），而分配width/height財產。

試試這個：

document.getElementById("header").style.width=(x-50)+'px'; 
____________________________________________________^^^^^^

來源

2016-02-23 07:17:33 Rayon

是啊我寫了它，但仍div問題仍然存在 –

你可以提供工作示例或小提琴？ – Rayon

https://jsfiddle.net/z6bzt0n2/#&togetherjs=7Mo8tNqsxu –

CSS：在添加子div到它的div寬度增加

回答

相關問題