htmlとcssの勉強がてら、ウェブページを制作しています。
内容としましては、アニメの公式ページのような感じです。
トップページ、あらすじ、キャラクター紹介、お話の4つに分かれています。
『お話』のページに、全50話のサブタイトルとあらすじを入れようと考えています。
サイドバーが左にあり、メインコンテンツが右にあるイメージです。
現在の各htmlとCSSは、以下になっています。
html
<body> <div id="sideber"> <div id="logo"> <h1><a href="index.html"><img src="shadow.png" alt="logo" width="164" height="327"></a></h1> </div> <div id="navigation"> <nav> <ul> <li><a href="about.html">アラスジ</a></li> <li><a href="character.html">トウジョウジンブツ</a></li> <li><a href="story.html">オハナシ</a></li> </ul> </nav> </div> </div> <div class="story-main"> <h2 class="title-area">オハナシ</h2> <nav> <h4>サブタイトル</h4> <p>あらすじ</p> </nav> ……省略…… <nav> <h4>サブタイトル</h4> /*最後の話*/ <p>あらすじ</p> </nav> </div> /*<div class="story-main">の終わり*/
CSS
body { color: white; background-color:#f2f2e8; margin: 0; min-height: 1vh; overflow: hidden; /*padding-bottom、margin-bottomで伸ばしたバーを調整*/ /* サイドバー ================================ */ #sideber{ color: white; height:100%; position: absolute; top:0; left: 0; bottom: 0; z-index: 10; font-family:'MyFont3'; padding-bottom: 6900px; */サイドバーを伸ばす/* margin-bottom: -6900px; } #sideber #logo{ width: 130px; position: absolute; top: 0; left: 0; bottom: 0; z-index: 2; } #sideber #logo > h1{ padding-top: 30px; text-align: center; box-sizing: border-box; } #sideber #navigation { width: 190px; padding-top: 78px; padding-left: 40px; position: absolute; left: 130px; top: 0; bottom: 0; box-sizing: border-box; background-color: rgba(51,51,51,0.6); min-height: auto; } #sideber #navigation nav ul li{ margin-top: 23px; font-size: 12px; line-height: 12px; letter-spacing: 0.1em; } /* 物語 ================================ */ .story-main { padding: 180px 8% 10px; height: 472px; color: black; font-family:'MyFont3'; } .story-main h2{ width: 420px; margin: 0 0 0 -300px; position: absolute; top: 100px; left: 50%; z-index: 2; font-size:40px; padding: 0.5em 0;/*上下の余白*/ border-bottom: solid 1px #000;/*下線*/ } .story-main nav{ margin:40px 0 0 270px; width: 670px; line-height:180%; left: 53%; -webkit-transition: left 1500ms ease; transition: left 1500ms ease; z-index: 2; } .story-main nav h4{ width: auto; margin: 0 0 0 -300px; position: absolute; left: 50%; z-index: 2; font-size:30px; font-family: YuGothic,'Yu Gothic',sans-serif; font-weight: normal; } .story-main nav p{ padding-top: 100px; font-family: YuGothic,'Yu Gothic',sans-serif; font-weight: normal; }
このサイトを参考にして、メインコンテンツの長さとサイドバーの長さを合わせようとしました。
http://ideahacker.net/2013/06/20/5512/
しかし、長さは合いましたが、今度はメインコンテンツが全て見られなくなってしまいました。
story-mainのheightを設定しても効果がありません。
また、overflowを解除すると、今度は別のページのサイドバーが凄まじい長さになってしまいます。
どうか知恵をかしてください。
よろしくお願い致します。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。