0

私はhtmlとcssが初めてで、すべてのページに固定バナーとサイドメニューがあり、コンテンツが中央のフレームのような環境にあるWebサイトを設計しようとしています。現時点では、次のようにすべてが流動的な形になっています。

<body>

<div id="banner">
<?php
include('banner.html');
?>
</div>

<div id="sidemenu">
<?php
include('sidemenu.html')
?>
</div>

<div id="content">
<?php
include ('content.html')    
?>
</div>

</body>

そして私のスタイルCSSコードの一部として私は持っています:

#banner
{
background-color:#6a2b93;
color:#FFDB00;
text-align:right; 
font-family:"Times New Roman", Times, serif;
width:100%;
height:10%;
position:fixed;
}


#sidemenu
{
background-color:#6B2B93;
color:#FFDB00;
text-align:left;
font-family:"Times New Roman", Times, serif;
padding-left:2%;
padding-right:1%;
padding-bottom:5px;
height:90%;
width:20%;
position:fixed;
top:10%;
float:left; 
overflow: auto;
}

#content
{
background-color:#FFFFFF;
color:#000000;
text-align:justify;
font-family:="Times New Roman", Times, serif;
margin-right:20px;
margin-left:23%;
padding-right:2.5%;
padding-left:2.5%;
padding-bottom:5px;
height:90%;
width:72%;
position:fixed;
top:10%;
float:left;
overflow:auto;
}

理想的には、バナーの高さを 3em にしたいのですが、サイドメニューとコンテンツの自動オーバーフロー オプションを維持しながら、そうする方法を見つけることができないようです。これは可能ですか？

4

2 に答える 2

0 
#banner
{
background-color:#6a2b93;
color:#FFDB00;
text-align:right; 
font-family:"Times New Roman", Times, serif;
width:100%;
min-height:100px;
height:100px;
}


#sidemenu
{
background-color:#6B2B93;
color:#FFDB00;
text-align:left;
font-family:"Times New Roman", Times, serif;
padding-left:2%;
padding-right:1%;
padding-bottom:5px;
min-height:100px;
height:90%;
width:200px;
position:fixed;
top:100px;
float:left; 
overflow: auto;
}

#content
{
background-color:#FFFFFF;
color:#000000;
text-align:justify;
font-family:="Times New Roman", Times, serif;
margin-right:20px;
margin-left:23%;
padding-right:2.5%;
padding-left:2.5%;
padding-bottom:5px;
height:90%;
width:72%;
top:10%;
float:left;
overflow:auto;​}​
于 2012-09-22T23:41:47.637 に答える
0

すべての要素で使用している理由がわかりません。position:fixedヘッダーやフッター以外の要素の場合、サイズ変更時にウィンドウと一緒に移動せず、(明らかに) 位置に固定されたままになるため、これが良い解決策になることはめったにありません。ウィンドウで。ただし、#banner の高さを 3em にしたい場合は、#sidemenu と #contenttop:3emもバナーと重ならないようにする必要があります。更新されたフィドルを見る

更新:これは、固定ヘッダーとその下の左/右のフルハイトを使用して、構造(独自の測定値を挿入)に関して必要なものである可能性があります- Fiddle。

更新 2:では、もう一度試してみましょう。これでよろしいですか? 固定ヘッダーとサイドバー、およびオーバーフロー時にスクロールするコンテンツ セクション。独自の測定値に変更する必要があります-フィドル

于 2012-09-22T20:38:13.807 に答える