html - Web アプリケーション UI - 高さ 100% のレイアウト

Question

ブラウザー ウィンドウにスクロール バーを表示せずにブラウザー ウィンドウのすべての使用可能なスペースを消費するアプリケーションを見てきましたが、特定の div のスクロール バー (たとえば、jsfiddle は、html、css、javascript、および結果の div にスクロール バーを使用しますが、ブラウザー ウィンドウは使用しません)スクロールバー）。アプリケーション用にそのようなレイアウトを開発しようとしています。アプリケーション スタイル UI、高さ 100% 幅のレイアウト、流動レイアウトなどのキーワードをいくつか試しましたが、どれも望ましい結果を返していないようです。すみません、初心者なので質問させてください。そのようなレイアウトの特定の用語はありますか。これを達成するためのいくつかのテクニックとjqueryプラグインに出くわしましたが、それでも最善の方法は何でしょうか. リンクの提案は大歓迎です。

Answer 1

これは非常に基本的なことです。

最初に、CSS でhtml の bodyの height プロパティを設定する必要があります。

html, body {
   height:100%;
   overflow:hidden;
}

hiddenへのオーバーフローは、ウィンドウのスクロールバーを非表示にします。

次に、HTML で div を定義し、div に.fooのようなクラス名を割り当てます。

.foo {
    height:400px;
    overflow:auto;
}

オーバーフローをautoに設定すると、div がコンテンツのスクロールを処理します。

見てみましょう: http://jsfiddle.net/mXU3f/

Answer 2

Take a look at this blog post. The selected answer above is a bit too simplistic for a full screen web application UI.

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

Some basic CSS gets you pretty far in building your full screen, 100% height, or whatever you want to call it, web application UI.

Answer 3

私があなたを理解しているので、これが役立つかもしれません：

html:

    <div id="container">
<div class="box">
    <p>
        "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
    </p>
    </div>
</div>

CSS:

        #container {
        display:block;
        position:absolute;
        height: auto !important;
        bottom:0;
        top:0;
        left:0;
        right:0;
        background-color:red}

.box {
    margin:50px;
    height: 200px;
width: 200px;
position:relative;
background-color:green;
 overflow-y: scroll;
}