3

html-css について無知で申し訳ありません。twitter ブートストラップ フレームワークを使用して、標準的な Rails アプリケーションを開発しました。以下のスニペット (application.html.erb) に示すように、通常どおりヘッダー コンテナー フッターのようにページを整理しています。

ここで、すべてのページが画面の高さに収まるようにしたいと考えています (添付のスクリーンショットの場合のように、コンテンツが短い場合は画面の高さの 100% に達します)。

確かに、スクリーンショットでわかるように、画面の下部に灰色の領域があります。代わりに、画面全体を埋めるページが必要です...

それは何らかのCSS構成だと思いますが、いくつかのCSS設定を試してみましたが成功しませんでした。なにか提案を ？

ありがとう！ジョルジオ

<!DOCTYPE html> <html>   <head>
    <title>Esami Anatomia</title>
    <%= render 'layouts/responsive' %> 
    <%= stylesheet_link_tag "application", media: "all" %>
    <%= javascript_include_tag "application" %>
    <%= csrf_meta_tags %>
    <%= render 'layouts/shim' %>   </head>   <body>   <%= render 'layouts/header' %>
    <div class="container-flow">
      <%= render 'layouts/flashes' %>
      <%= yield %>
    <div class="layout-filler"> </div>
    </div>   <%= render 'layouts/footer' %>   </body> </html>

スクリーンショット

4

1 に答える 1

6

ブラウザの高さ 100% までレイアウトを拡大したい場合は、次の基本設定を使用できます。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all"> 
html, body{height:100%;} 
#outer{
min-height:100%;
}

* html #outer{height:100%;} /* for IE 6, if you care */

body, p { margin:0; padding:0}

</style>

</head>
<body>

<div id="outer"> 
    <p>content goes here</p>
</div>

</body>
</html>

フッターを常に画面の一番下に固定したい場合 (さらに下に押し込むだけの十分なコンテンツがない場合)、次のようなものを使用できます。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
html, body {height: 100%; margin: 0; padding: 0;}

* html #outer {/* ie6 and under only*/
    height:100%;
}

.wrapper {
    min-height: 100%;
    margin: -240px auto 0;
}

.content {padding-top: 240px;}

.footer {
    height: 240px; background: #F16924;
}

</style>

</head>
<body>

<div class="wrapper">
    <div class="content">content here</div>
<!-- end wrapper --></div>
<div class="footer"></div>

</body>
</html>
于 2013-05-09T15:41:46.587 に答える