0

次の属性を持つレイアウトに取り組んでいます。

  1. 固定ヘッダー (コンテンツはその下にスクロールアップする必要があります)
  2. 固定 100% 高さ列 (左側のメニュー)
  3. コンテンツエリア
  4. コンテンツが短い場合は A. が下にくっつくフッター、または B. コンテンツが長い場合は (画面外で) 押し下げられるフッター

1、2、3、および 4 A を動作させることができました。しかし、長いコンテンツによってフッターを押し下げることはできません。最初の作業は CSS リセットに基づいていました (例: http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/ )。固定ヘッダーと左の列が役に立たないと思います。

これを克服する方法についての指針/提案をいただければ幸いです。

これが私のコードです：

<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>Layout</title>

<style type="text/css">

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

#sc_admin_wrapper { 
min-height:100%; 
position:relative; 
background:#fff; 
margin: 0; 
}
#sc_admin_header{
width:100%;
height:50px;
position:fixed;
top:0;
background: #212121;
z-index:9995;
color:#fff;
}

#sc_admin_logo { 
width:20%; 
float: left; 
}

#sc_admin_menu {
position:fixed;
top:50px;
bottom:0;
float:left;
width: 20%;
margin: 0;
background: #3d3d3d;
color: #fff;
}
#sc_admin_content { 
float: left; 
margin:50px 0 0 20%; 
width: 77%; 
padding: 0.5% 1.5% 30px 1.5%; 
}
#sc_admin_footer {
background: #ffcc00; 
width: 77%;
height: 30px;
position:absolute;
bottom:0;
left:0;
margin: 0px 0 0 20%; 
padding: 0 1.5% 0 1.5%; 
}
</style>

</head>
<body>

<div id="sc_admin_wrapper"> 

<div id="sc_admin_header"> 
    <div id="sc_admin_logo"><h1>Fixed header</h1></div>
    <div class="clear"></div>
</div>

<!-- / #sc_admin_header -->

<div id="sc_admin_menu">
    <p>Fixed height column at 100%;</p> 
    <div class="clear"></div>
</div> 

<!-- / #sc_admin_menu -->

<div id ="sc_admin_content">

    <div id="sc_msgs"></div>

    <p>This would be my short or long content.</p>

    <p>I should scroll under the header.</p>

    <p>My footer should be fixed at the bottom of the screen if content is 
    short, or, scroll should the content be longer.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
    mollit anim id est laborum.</p>

     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
    mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
    mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
    mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
    mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
    mollit anim id est laborum.</p>                                       

    <div class="clear"></div>

</div> 

<!-- / #sc_admin_content -->

<div id="sc_admin_footer">
    This is my fixed footer     
    <div class="clear"></div>
</div>
<!-- / #sc_admin_footer -->
</div>
<!-- / #sc_admin_wrapper -->
</body>
</html>
4

2 に答える 2

0

うーん、ほぼ正解だと思います！いくつかの CSS/構造の詳細を見逃していました。.clear次のように、クラスのスタイル定義を追加する必要があります。

.clear{
    clear:both;
}

次に、と の間にあるように、.clearの下部にある div 要素を移動する必要があります。.sc_admin_content.sc_admin_content.sc_admin_footer

これがどのようになるかを示すJSFiddle の例を次に示します。(コンテンツを削除して [実行] を押してみてください。フッターが一番下に表示されたままになっていることを確認してください!) これが探していたものではない場合は、お知らせください。さらにお手伝いさせていただきます。幸運を！

于 2013-07-18T21:57:27.563 に答える