HTMLコードに本文テキストがありません

-1

次のHTMLコードを実行すると、本体コードが正しく表示されず、ヘッダーとサイドバーのみが表示されます。HTMLコードに本文テキストがありません

本文は表示されず、本文も表示されません。誰かが私が間違っていることを教えてもらえますか？ありがとうございました。ここで

は私のhtmlコードです：それは左のサイドバーや身体divをフロートするだろう修正する

#header { 
    width: 700px; 
    height: 100px; 
    border-radius: 2px; 
    background-color: #05b6f3; 
    border-style: groove; 
    margin: auto; 
    text-align: center; 
    } 
#sidebar { 
    width: 200px; 
    height: 600px; 
    border-radius: 2px; 
    background: #05b6f3; 
    border-style: groove; 
    margin-left: 20px; 
} 
#title { 
    font-size: 40px; 
    font-family: sans-serif; 
    color: #4e8dbd; 
    text-align: center; 
} 
#webbody { 
    background-color: #609299; 
} 
#body { 
    width: 800px; 
    margin: auto; 
    height: 900px; 
    border-radius: 2px; 
    background-color: ;#4e8dbd; 
    border-style: groove; 
} 
.bodytext { 
    font-size: 14px; 
    font-family: Verdana; 
    margin-right: 10px; 
    margin-left: 20px; 
    margin-top: 20px; 
    margin-top: 20px; 
}

出典

2016-05-03 Lyna B.

：

はフィドルを参照してください？それはあなたがそれを入力するために使用しているものですか？ – jonrsharpe

本文が表示されたら、下にスクロールする必要があります:) - ボディが広すぎて押し下げられません。コンテナの幅を横に並べて調整します – ochi

スクロールすると表示されます。私はヘッダー、次にサイドバー、そしてそのボディの下にある。 – JoeL

一つの方法、：ここで

<!doctype html> 
<html> 
<head> 
    <title>Coding Website Homepage</title> 
    <meta author="Lyna Beraich" content="Coding Website Homepage"> 
    <link rel="stylesheet" href="homepageCss.css" type="text/css"> 
</head> 
<body id="webbody"> 
    <div id="header" class= "container"><h1 id="title">Coding Interests</h1></div> 
    <div id="sidebar" class= "container"></div> 
    <div id="body" class="container"> 
    <h2 class="bodytext"> 
     Recent News 
    </h2> 
    <p class="bodytext"> 
     I have recently started to learn jquery, a neat way to make your website look 
     nice and interactive. 



    </p> 
    </div> 
</body>

は私のCSSコードでありますbody divの幅をwidth: calc(100% - 240px);に設定し、100％からサイドバーの幅とパディングを引いた値を設定します。メモ帳でどのように関与++ https://jsfiddle.net/c259LrpL/19/

#sidebar { 
    width: 200px; 
    float: left; 
    height: 600px; 
    border-radius: 2px; 
    background: #05b6f3; 
    border-style: groove; 
    margin-left: 20px; 
} 

#body { 
    width: calc(100% - 240px); 
    float: left; 
    height: 900px; 
    border-radius: 2px; 
    background-color: ; 
    #4e8dbd; 
    border-style: groove; 
}

出典

2016-05-03 20:25:55

'calc（）'はあまりよくサポートされていません。 – Aloso

@Alosoは十分にサポートされているようですhttp://caniuse.com/#search=calc –

私は少しhtmlを再配置しました：https://jsfiddle.net/ck7gm472/ – Aloso

HTMLコードに本文テキストがありません

答えて

関連する問題