0

container-about div に問題があります。ヘッダー div の後に div が幅と高さ全体を占有するようにするため、高さは 100% です。問題は、全文を表示するためにスクロールしないことです。

また、タブレットやスマートフォンのスクロールでテキストを表示する機能も必要です。

ご協力いただきありがとうございます。

<div class='header'>
   <div class='header-container'>

</div>
</div>
<div class='container-wrapper'>
   <div class='container-about'>
       <div class='about-text'>
            text comes here.....
            ........
       </div>
   </div>
</div>

リンク: http://ttest11234.librax.net/index.html

CSS:

* {
margin: 0 auto;
padding: 0;
  }

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

body {
font-size: 12px;
line-height: 1.5;
background: #000;
font-weight: 400;
}

.header {
top: 0px;
left: 0px;
width: 100%;
height: 100px;
position: fixed;
background: gray;
opacity: 0.8;
}

.header-container {
width: auto;
height: 100px;
margin: 0 10% 0 10%;
text-align: center;
}

.container-wrapper {
width: 100%;
height: 100%;
}

  .container-about {
    margin: 100px auto;
padding-bottom: 2%;
width: 100%;
height: 100%;
background: #FFF;
position: relative;
}

.container-about h3 {
padding: 0 10% 5% 10%;
font-family: 'Verdana', sans-serif;
font-size: 12px;
    line-height: 150%;
font-weight: 400;
}
4

3 に答える 3

2

add overflow: scroll propertyincontainer-about classおよびcontainer-wrapper classof div

.container-about {
    background: none repeat scroll 0 0 #FFFFFF;
    height: 100%;
    margin: 100px auto;
    overflow: scroll;
    padding-bottom: 2%;
    position: relative;
    width: 100%;
}
于 2013-10-16T09:10:07.527 に答える
1

解決策は、単純に に追加するoverflow: autoこと.container-wrapperです。これにより、目的のスクロールバーが得られます。

しかし、今の問題は、div が高すぎることです (体の高さ 100% + 100 ピクセル)。上部のパディングを与え100px、ヘッダーを絶対に配置します。

于 2013-10-16T09:09:25.173 に答える
1
  1. .contain-about に固定の上マージンを使用しないでください。デスクトップよりも多くのスペースを必要とするモバイル デバイスで使用するためです。代わりに、% または em を使用できます。
  2. スクロールバーを取得するには、overflow-x を auto に設定するか、.about-text をスクロールします。
于 2013-10-16T09:16:29.860 に答える