我想让我的 div #title 水平延伸到整个页面顶部。在下面使用我的 CSS 效果很好。但是，我允许用户使用 jQuery 将元素添加到我的页面，当发生这种情况时，页面会水平扩展并且用户可以左右滚动。不幸的是，当页面展开并保持原始页面的宽度时，我的#title div 不会展开。有什么办法可以让每次页面宽度变化时div自动扩展到页面宽度？
HTML:
<html>
<head>
...
</head>
<body>
<div id="title">
<p class="title_banner_words" id="title_words">My Title</p>
</div>
</body>
</html>
CSS:
html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100%;
position: relative;
padding: 0;
margin: 0;
}
#title {
background-color: #35373b;
width:100%;
height:100px;
position: absolute;
}
最佳答案
试试这个，
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" >
function methodToFixLayout() {
winWidth = $(window).width();
console.log(" " + winWidth);
$('#title').css('width', winWidth / divide with a number which suits); //Ex: winWidth / 12.49
$('p').css('float','left');
}
$(document).ready(function(){
methodToFixLayout();
});
$(window).resize(function(){
methodToFixLayout();
});
</scipt>
我希望这会有所帮助。
关于jquery - 每次页面展开时自动将 div 调整为页面宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20161655/