web-dev-qa-db-ja.com

固定ヘッダーと100％コンテンツの高さのCSSレイアウト？

固定の高さのヘッダーとコンテンツ領域を画面いっぱいに表示しようとしています。 content divには、telerikmvcグリッドが含まれています。 stackoverflowで提案されたいくつかを試しましたが、コンテンツ領域であるコントロールは、ヘッダーの固定高さを考慮していないため、常にサイズが正しくないように見えます。ヘッダーが40pxの場合、余分な40pxをスクロールします。助言がありますか？

<div id="header">
</div>
<div id="content">
   <telerik mvc grid control>
</div>

Css

html,body
{
     margin:0;
     padding:0;
     height:100%;
}

#header { 
    position:absolute; 
    height: 40px; 
    left:0; 
    top:0; 
    width:100%; 
    background:green;
  }

  #content { 
    position: absolute; 
    top:40px; 
    left:0;
    width:100%;
    height:100%;
    background:#eee; 
  }

更新：ロード時にグリッドのサイズを手動で変更し、ウィンドウのサイズを変更する必要がありました。追加

 .ClientEvents(events => events.OnLoad("resizeGrid"))



<script type="text/javascript">
        window.onresize = function () {
            resizeContentArea($("#Grid")[0]);
        }

        function resizeGrid(e) {
            debugger;
            resizeContentArea($("#Grid")[0]);
        }

        function resizeContentArea(element) {
            var newHeight = parseInt($(element).outerHeight(), 10) - parseInt($(".t-grid-header", element).outerHeight(), 10) - parseInt($(".t-grid-pager", element).outerHeight(), 10);
            $(".t-grid-content", element).css("height", newHeight + "px");
        }
    </script>
cssasp.net-mvc-3htmltelerik-mvc
12
NullReference

[〜＃〜]デモ[〜＃〜]

[〜＃〜] html [〜＃〜]

<div id="wrapper">
    <div id="header">HEADER</div>
    <div id="content">CONTENT</div>
</div>

[〜＃〜] css [〜＃〜]

html, body {
    height:100%;
    margin:0;
    padding:0;
}
#wrapper {
    width:400px; /*set to desired width*/
    height:100%;
    margin:auto;
    position:relative;
}
#header {
    height:40px; /* set to desired height*/
}
#content {
    position:absolute;
    bottom:0;
    top:40px; /*must match the height of #header*/
    width:100%;
    overflow:auto;
}
20
kei

box-sizingを使用すると、次のように実行できます

http://jsfiddle.net/Wener/Vat4C/1/

ヘッダーがラッパー内にあるかラッパー外にあるかに関係なく、機能します。

追加するだけです：

#wrapper
{
    box-sizing: border-box;
    padding-top: 40px;
    margin-top: -40px;
}
#header
{
    /* add this if header out of wrapper */
    position: relative;
    z-index: 9;
}
#content
{
    /* remove
    position:absolute;
    bottom:0px;
    top: 40px;*/

    /* add */
    height: 100%;
}

これはより柔軟性があり、コンテンツの位置は絶対的ではありませんが、box-sizingプロパティが必要です。

box-sizingについて、私はless関数を休閑と定義しました：

.box-sizing(@type: content-box) {
    -webkit-box-sizing: @type; /* <=iOS4, <= Android  2.3 */
    -moz-box-sizing: @type; /* Firefox 1+ */
    box-sizing: @type; /* Chrome, IE8+, Opera, Safari 5.1*/
}

.border-box()
{
    .box-sizing(border-box);
}
2
wener

#header elementを#content elementの中に配置すると、コンテンツ要素の高さが100％になります。

HTMLの例を次に示します。

<div id="content">
     <div id="header">
        Header.
    </div>
    Content Area.
</div>

CSS：

body,html {
    height:100%;
    margin:0;
    padding:0;
}

#header {
    background:#666;
    height:30px;
}

#content {
    height:100%;
    background:#999;
    width:100%;
}

デモ：

http://jsfiddle.net/Rz2tN/

2
peterp

外側を100％の高さに設定し、内側をヘッダーで固定すると、コンテンツの自動高さが十分になります。

スクロールを修正するには、オーバーフローのプロパティを確認してください。表示はスクロールを防ぎます。

1
bryanegr

コンテンツdivに25pxのトップマージンを設定し、コンテンツdivにヘッダーが含まれていないことを確認します。

コンテンツdivにヘッダーを含める必要がある場合は、上記と同じプロパティを使用して、グリッドの新しいdivを作成します。

1
alquatoun

垂直スクロールの場合は次を使用でき、水平スクロールの場合はdivを使用します

<div class="DataGridXScroll">

@(Html.Telerik().Grid(listCustomerStatus)
                .Name("grvSalesAdjustment")
                .DataKeys(keys => keys.Add(k => k.CustCode))
                .Columns(column =>
                {

                })
               .Selectable()
               .Pageable(page => page.PageSize(100))
               .Scrollable(scroll => scroll.Height(300))
)
 </div>

次を追加します[〜＃〜] css [〜＃〜]

.DataGridXScroll
{
    width: 1000px;   
    overflow-x: scroll;
    text-align:left;
}

これはFirefoxや他のブラウザで動作します。 IEの場合は、次のCSSを使用してください

.t-grid
{
   position: static;
   overflow:hidden;
}

.t-grid-content
{
   overflow-x: hidden;
   position:static; 
   width:100%;  
}

.t-grid-header-wrap
{
   position:static;    
}

.t-grid-content
{
   overflow-x: hidden;    
}

.t-grid-footer-wrap
{
  position:static;
}

これは非常にシンプルなソリューションであり、誰もが楽しんでいると思います。

0
Md. Nazrul Islam