HTML5でヘッダー(グローバルナビ含む)、左サイドバー(float:left),

コンテンツ本体(float:right)、フッターという構成でHTMLを組んでいます。
clearfixでfloatを解除していますが、左サイドバー、本体、背景ともに配色してあり、それぞれの高さが同じように見えるようにしたいのですが、どのようにすれば良いでしょうか(現在サイドバーの内容が入っているところでボックスが終わっており、サイドバーが切れているように見えています)

回答の条件
  • URL必須
  • 1人5回まで
  • 13歳以上
  • 登録:2011/12/17 23:32:39
  • 終了:2011/12/24 23:35:02

ベストアンサー

id:Lhankor_Mhy No.2

Lhankor_Mhy回答回数779ベストアンサー獲得回数2312011/12/18 16:16:22

ポイント50pt

こちらを参考にしてみてください。
[CSS]高さの異なるカラムを揃えるスタイルシート | コリス
 
 
 
でも、せっかくHTML5で作ってIEを切り捨てるのですから、CSS3のボックスレイアウトを使えばいいんじゃないかな、と思いますです。
CSS3 でのレイアウトで使える box 系プロパティのまとめ | CSS Lecture

id:wackey

ありがとうございます。
ところが、完全にIEを切り捨てられないので、html5.jsなどをつかったりcss修正したりして、見えるようにはしているのです。

そういえば、いろいろと調べているときにこれと同様に
padding-bottom: 32768px;
margin-bottom: -32768px;
というのをみかけました。
常套手段なのですね。勉強になりました。ありがとうございます。

少し後で時間をとって実装してみます。

2011/12/18 16:19:19

その他の回答(1件)

id:kodairabase No.1

kodairabase回答回数661ベストアンサー獲得回数802011/12/18 00:07:50

ポイント50pt

次の2本の記事を参考にしてください。
後編のやり方の方が汎用性が高いです。

CSS段組4:段の背景色が切れないようにする(前編)
http://allabout.co.jp/gm/gc/23847/

CSS段組4:段の背景色が切れないようにする(後編)
http://allabout.co.jp/gm/gc/23848/

id:windofjuly

ポイント欲しさにしても、ひどい回答多すぎますよ
そんな古い記事引っ張ってきて、どこがHTML5なのかな?
反論あればどうぞ

2011/12/18 00:36:58
id:Lhankor_Mhy No.2

Lhankor_Mhy回答回数779ベストアンサー獲得回数2312011/12/18 16:16:22ここでベストアンサー

ポイント50pt

こちらを参考にしてみてください。
[CSS]高さの異なるカラムを揃えるスタイルシート | コリス
 
 
 
でも、せっかくHTML5で作ってIEを切り捨てるのですから、CSS3のボックスレイアウトを使えばいいんじゃないかな、と思いますです。
CSS3 でのレイアウトで使える box 系プロパティのまとめ | CSS Lecture

id:wackey

ありがとうございます。
ところが、完全にIEを切り捨てられないので、html5.jsなどをつかったりcss修正したりして、見えるようにはしているのです。

そういえば、いろいろと調べているときにこれと同様に
padding-bottom: 32768px;
margin-bottom: -32768px;
というのをみかけました。
常套手段なのですね。勉強になりました。ありがとうございます。

少し後で時間をとって実装してみます。

2011/12/18 16:19:19
  • id:Cherenkov
    ソースを提示すれば回答しやすいと思います。
  • id:wackey
    ご回答、コメントありがとうございます。
    ソースは守秘義務上の問題もあるので、ざっくりと差し引いてこんな感じになります。

    ■HTML
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>ページタイトル</title>

    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />

    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    </head>

    <body>

    <div id="wrapper">

    <header>
    <div id="headermenu"><a href="index.html"><img src="ヘッダータイトル画像URL"></a>
    ■ここにグローバルナビゲーション■
    </header>

    <div id="contents" class="clearfix" style="clear:both;">

    <div id="localsidebar">

    <div id="sidebarseach">
    ■このsidebarseach要素の背景の色がその親要素の高さと等しくならない
    <img src="../images/side_head.png" alt="探す" width="247" height="29">

    <div style="padding:10px;">
    ■ここがサイドバーのうちの1つのコンテンツ
    ・リンク1<br>
    ・リンク2<br>
    ・リンク13
    <div style="text-align:right;"><img src="画像URL"></div>
    </div>
    </div><!-- sidebarseach -->

    </div><!-- sidebar -->
    <div id="localmaincontents">

    <p><img src="メイン画像URL"></p>

    <div class="bodyinbody">
    <h3>見出し</h3>

    <div class="contentsinbodyinbody">
    <p>本文<br>
    本文<br>
    本文<br>
    本文<br>
    本文<br>
    本文<br>
    本文<br>
    本文<br>
    本文<br>
    本文<br>
    本文<br>
    本文<br>
    本文<br>
    本文<br>
    </p>
    </div><!-- contentsinbodyinbody -->

    </div><!-- bodyinbody -->

    <div id="contentfooter"> <img src="../images/facebook_icon.png" width="15" height="15" alt="facebookicon">フッターなど</div>

    </div><!-- /maincontents -->

    </div><!-- /contents -->

    <footer>

    <div id="tel"><img src="フッター画像URL"></div>

    </footer>

    </div><!-- wrapper -->

    </body>

    </html>


    ■CSS
    /*
    html5doctor.com Reset Stylesheet
    v1.6.1
    Last Updated: 2010-09-17
    Author: Richard Clark - http://richclarkdesign.com
    Twitter: @rich_clark
    */

    /*要素のフォントサイズやマージン・パディングをリセットしています*/
    html, body, div, span, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    abbr, address, cite, code,
    del, dfn, em, img, ins, kbd, q, samp,
    small, strong, sub, sup, var,
    b, i,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section, summary,
    time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    }

    /*行の高さをフォントサイズと同じにしています*/
    body {
    line-height:1;
    }

    /*新規追加要素のデフォルトはすべてインライン要素になっているので、section要素などをブロック要素へ変更しています*/
    article,aside,details,figcaption,figure,
    footer,header,hgroup,menu,nav,section {
    display:block;
    }

    /*nav要素内ulのマーカー(行頭記号)を表示しないようにしています*/
    nav ul {
    list-style:none;
    }

    /*引用符の表示が出ないようにしています*/
    blockquote, q {
    quotes:none;
    }

    /*blockquote要素、q要素の前後にコンテンツを追加しないように指定しています*/
    blockquote:before, blockquote:after,
    q:before, q:after {
    content:'';
    content:none;
    }

    /*a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を親要素のベースラインに揃えるようにしています*/
    a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    }

    /* ins要素のデフォルトをセットし、色を変える場合はここで変更できるようにしています */
    ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
    }

    /* mark要素のデフォルトをセットし、色やフォントスタイルを変える場合はここで変更できるようにしています
    また、mark要素とは、文書内の検索結果で該当するフレーズをハイライトして、目立たせる際に使用するようです。*/
    mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
    }

    /*テキストに打ち消し線が付くようにしています*/
    del {
    text-decoration: line-through;
    }

    /*IEではデフォルトで点線を下線表示する設定ではないので、下線がつくようにしています
    また、マウスオーバー時にヘルプカーソルの表示が出るようにしています*/
    abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
    }

    /*隣接するセルのボーダーを重ねて表示し、間隔を0に指定しています*/
    table {
    border-collapse:collapse;
    border-spacing:0;
    }

    /*水平罫線のデフォルトである立体的な罫線を見えなくしています*/
    hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
    }

    /*縦方向の揃え位置を中央揃えに指定しています*/
    input, select {
    vertical-align:middle;
    }

    /*画像の下の余白を防ぐ*/
    img {
    vertical-align:bottom
    }

    /* ページ全体 */
    html {
    background-color:#fef7f7;
    }

    body {
    margin: 0;
    padding: 0;
    color: #666;
    background: #fef7f7;
    background-repeat: repeat-x;
    font-size: 12px;
    font-family: "メイリオ","Meiryo",verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"MS Pゴシック","MS PGothic",Sans-Serif;
    line-height: 100%;
    }

    * html body { /* for IF6 */
    font-family: "メイリオ","Meiryo",verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"MS Pゴシック","MS PGothic",Sans-Serif;
    }

    #wrapper {
    width: 1000px;
    margin: 0px auto;
    text-align: left;
    background: #fef7f7;
    }

    .borderline {
    width: 1000px;
    height:4px;
    background-color:#efa3a3;
    }


    /* 汎用的なクラス */

    .imgR {
    float: right;
    margin: 0 0 10px 10px;
    }

    .imgL {
    float: left;
    margin: 0 10px 10px 0;
    }



    /* ヘッダー&メニュー */
    header {
    display:block;
    padding: 0;
    text-align: left;
    width:1000px;
    }

    #headermenu {
    width:1000px;
    }


    /* 本文部分 */
    h1 {
    font-size:18px;
    color:#666;
    }

    h2 {
    font-size:14px;
    color:#666;
    }

    h3 {
    padding:6px 0 6px 10px;
    border-left:6px solid #efa3a3;
    color:#efa3a3;
    font-size:14px;
    line-height:140%;
    }

    p {
    margin:10px 0;
    line-height: 170%;
    }

    #contents {
    width:1000px;
    background:#fadbdd;
    }

    #topsidebar {
    width:250px;
    height:338px;
    padding:10px;
    float:left;
    background-image:url(../images/side_back.png);
    }

    #maincontents {
    width:710px;
    height:338px;
    padding:10px;
    float:right;
    background:#FFF;
    position:relative;
    }


    #localsidebar {
    width:250px;
    height:100%;
    padding:10px;
    float:left;
    background:#fadbdd;
    }

    #localmaincontents {
    width:690px;
    padding:20px;
    float:right;
    background:#FFF;
    position:relative;
    }

    #foodmenucontents {
    width:650px;
    padding:10px 40px;
    float:right;
    background:#FFF;
    position:relative;
    }


    .bodyinbody {
    padding:0 0 0 20px
    }

    .contentsinbodyinbody {
    padding:0 0 0 16px;
    margin:0 0 20px 0;
    }



    #contentfooter {
    width:710px;
    text-align:right;
    /*float:right;*/
    position:absolute;
    bottom:0;
    }

    /* サイドバー */

    #sidebarseach {
    width:247px;
    border:1px solid #efa3a3;
    background:#fff;
    }


    /* フッター&メニュー */


    #copyright {
    background-color:#d8b8bd;
    width:970px;
    height:30px;
    padding-top:10px;
    padding-right:30px;
    text-align:right;
    color:#FFF;
    font-size:10px;
    }

    /* clearfix */
    #hoge:after {
    content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
    }

    .clearfix:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }

    .clearfix{
    display:inline-block;
    min-height:1%; /* for IE 7*/
    }

    /* Hides from IE-mac */
    * html .clearfix { height: 1%; }
    .clearfix { display: block; }
    /* End hide from IE-mac */

    /* ---------- form ---------- */

    .star {
    color:#efa3a3;
    }

    .small {
    font-size:10px;
    }

    .bodycontents input {
    line-height: 100%;
    }

    dl dt {
    color:#333;
    font-size:14px;
    margin:10px 0 0 0;
    width:700px;
    border-bottom: dotted 1px #333;
    }
    dl dt span{
    color:red;
    font-weight:bold;
    }
    dl dd{
    padding:10px 10px 10px 38px;
    }
    dl dd input{
    line-height: 240%;
    position:relative;
    z-index:2;
    }
    dl dd label{
    position:relative;
    padding:5px 5px 5px 25px;
    margin : 0 5px 0 -25px;
    margin-left:-25px;
    position:relative;
    z-index:1;
    }
    dl dd.error input ,
    dl dd.error textarea ,
    dl dd.error label {
    background:#FFCCCC;
    }
    * html dl dd.error label {
    background:none;
    }
    *+html dl dd.error label{
    background:none;
    }
    dl dd p.error{
    margin:0;
    color:red;
    font-weight:bold;
    margin-bottom:1em;
    }

    #bottun {
    width:700px;
    text-align:center;
    }

    /* ---------- top jQuery slideshow ---------- */
    #slideshow img { display: none }
    #slideshow img.first { display: block }

    以上です。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません