-1

Web サイトをさまざまな画面サイズとウィンドウ サイズに最適化しようとしています。ユーザーが下にスクロールする必要がないように、div のコンテンツがブラウザーの高さの 100% を占めるようにしたいと考えています。これを実装する方法がわからない、これを試した

$(window).on('load resize', function(){
    $('.container-narrow').width($(this).width());
    $('.container-narrow').height($(this).height());
)};

しかし、これはうまくいかないようです.コンテンツはまだブラウザの高さを超えています. そして、スクロールを終了する必要があります

4

1 に答える 1

0

CSS はサイズ変更時に再計算します。

<html>
<head>
<style>
body, html {
 height: 100%;
 margin: 0px;
 padding: 0px;
}
.body {
 height: 100%;
 margin-bottom: -100px;
}
.header {
 height: 100px;
 background-color: #CCCCCC;
 text-align: center;
}
.content {
 text-align: center;
}
.footer {
 height: 100px;
 text-align: center;
 background-color: #AAAAAA;
}
</style>
</head>
<body>
<div class="body">
    <div class="header">
    This is the header.
    </div>
    <div class="content">This is the content.</div>
</div>
<div class="footer">
This is the footer.
</div>
</body>
</html>
于 2013-01-29T02:09:57.453 に答える