現在取り組んでいる Web ページには、固定サイズに設定されたメイン コンテンツ div が 1 つしかありません。「in div」スクロールバーではなく、ブラウザウィンドウのスクロールバーでスクロールできるようにしたいと思います。
コンテンツ div のサイズは幅: 1076px、高さ: 475px
基本的に私がやったことは、実際にはコンテンツ div の上にあるフローティング div にエッジ フェード イメージがあるため、div 内のスクロール バーを使用する場合、それを選択したりクリックしたりすることができないためです。フローティングdiv。そのため、スクロールバーを私のレイアウトで動作させるための助けを探しています。
私はこれを自分のページで機能させようとしていますが、特にレイアウトでこれを行う方法がわかりません。私のページへのテストリンクは次のとおりです。
http://184.66.76.75/gxwd_v2/
だから私が探しているのは、ブラウザのメインスクロールバーを使用して、「メインコンテンツ」divを固定サイズでスクロールすることです。そのため、コンテンツが固定サイズよりも大きい場合は、コンテンツを下にスクロールできます。私のレイアウトでは、div 内で div スクロール バーを使用するとします。div が「アクティブ」でないため、スクロールできません。それだけでなく、私の content_overlap div のためにその div を選択できます。それはコンテンツ ボックスの上に浮かんでいます。
CSS ファイル:
body {
background-color: #000000;
background-image: url(images/background.png);
background-repeat: no-repeat;
background-position: center;
margin: 0px auto;
padding: 0px;
color: #000000;
overflow: hidden;
}
/* ~~ this fixed width container surrounds all other elements ~~ */
.container {
width: 1076px;
height: 530px;
margin: 220px auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
/* ~~ This is the layout information. ~~ */
.menu {
width: 800px;
margin-left: 13%;
margin-right: 13%;
text-align: center;
}
.content {
padding: 0px 0px;
}
.content_overlap {
width: 1079px;
height: 504px;
background-image: url(images/fade.png);
background-position: top;
background-repeat: no-repeat;
position: absolute;
top: 252px;
left: 50%;
margin-left: -538px;
}
.maincontent {
position: relative;
top: 20px;
max-width: 1076px !important;
max-height: 460px !important;
overflow: auto;
padding: 0px 0px 0px 0px;
}
PHP ファイル:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>GuberX Web Development & Design</title>
<link rel="stylesheet" type="text/css" href="oneColFixCtr.css">
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css">
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4s.css" />
<link rel="stylesheet" media="only screen and (min-device-width: 481px)" href="desktop.css" type="text/css">
<meta name="viewport" content="initial-scale=0.5">
</head>
<body>
<div class="container">
<div class="content">
<div class="menu"><img src="images/menu/home-1.png"><img src="images/menu/spacer.png"><img src="images/menu/portfolio-1.png"><img src="images/menu/spacer.png"><img src="images/menu/services-1.png"><img src="images/menu/spacer.png"><img src="images/menu/contact-1.png"></div>
<div class="maincontent">
Test Possition of Text and whatnot1<br />
Test Possition of Text and whatnot2<br />
Test Possition of Text and whatnot3<br />
Test Possition of Text and whatnot4<br />
Test Possition of Text and whatnot5<br />
Test Possition of Text and whatnot6<br />
Test Possition of Text and whatnot7<br />
Test Possition of Text and whatnot8<br />
Test Possition of Text and whatnot9<br />
Test Possition of Text and whatnot10<br />
Test Possition of Text and whatnot11<br />
Test Possition of Text and whatnot12<br />
Test Possition of Text and whatnot13<br />
Test Possition of Text and whatnot14<br />
Test Possition of Text and whatnot15<br />
Test Possition of Text and whatnot16<br />
Test Possition of Text and whatnot17<br />
Test Possition of Text and whatnot18<br />
Test Possition of Text and whatnot19<br />
Test Possition of Text and whatnot20<br />
Test Possition of Text and whatnot21<br />
Test Possition of Text and whatnot22<br />
Test Possition of Text and whatnot23<br />
Test Possition of Text and whatnot24<br />
Test Possition of Text and whatnot25<br />
Test Possition of Text and whatnot26<br />
Test Possition of Text and whatnot27<br />
Test Possition of Text and whatnot28<br />
Test Possition of Text and whatnot29<br />
Test Possition of Text and whatnot30<br />
</div>
</div><!-- end .content -->
<div class="content_overlap"></div> <!-- This div has a background image that has fading edges for the content box --!>
</div><!-- end .container -->
</body>
</html>