0

重い HTML/CSS の作業を行ってから何年も経ちましたが、最近、会社の Web サイトのオーバーホールを開始しました。デザインの仕上がりにはかなり満足しており、すべてが機能しているように見えますが、コンテンツがページを埋め尽くすようになったので、「折りたたみ」の下にコンテンツがあるにもかかわらず、ページがスクロールしないことに気付きました。

これは、位置が固定された CSS テーブルを使用しているためだと思います。位置属性を「相対」に変更してみました。これでスクロールの問題は修正されましたが、レイアウトが台無しになり、どうすれば機能するのかわかりません。

これが私のコードのフィドルです：http://jsfiddle.net/jbooth63/SKnsc/

コードのライブ プレビューへのリンクは次のとおりです: http://www.financecapital.us/test/test.html

どんな助けでも大歓迎です！私が使用しているコードの例を次に示します。

<head>
<style type="text/css">
body,td,th {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 10px;
color: #333;}

body {
background-color: #fff;}

.socialcell {
position: fixed;
margin-top: 105px;
margin-left: 5px;
background-color: #ff9900;}


.headerimg {
position: fixed;
margin-left: 5px;
margin-top: 5px;}

.leftsidebar {
position: fixed;
margin-top: 155px;
margin-left: 5px;
background-color: #eee;
border-right: .1em dotted #369;
border-bottom: .1em dotted #369;}
</head>
<body>
<div class="headerimg"><img src="header2.jpg" title="Financing the world's equipment.">    
</div> 

<div class="socialcell">
<table width="300" height="50">
<tr>
<td><center>
<a href="https://www.facebook.com/financecapitalut"><img src="facebook.png" title="Finance 
Capital on Facebook" height="40"></a>
<a href="http://www.linkedin.com/company/finance-capital-llc?trk=hb_tab_compy_id_477909#">  
<img src="linkedin.png" title="Finance Capital on LinkedIn" height="40"></a>
<a href="https://twitter.com/FinanceCap"><img src="twitter.png" title="@FinanceCap on 
Twitter" height="40">
</center></td>
</tr>
</table>
</div>
4

1 に答える 1

4

それは簡単です。私はクロム開発者ツールを使用して自分でそれを行いました。

問題は、「position: fixed;」を使用していることです。あなたのdivに。

「位置: 絶対;」の使用 すべてのdivで、動作するはずです。

お役に立てば幸いです。

于 2013-08-19T20:24:05.277 に答える