現在、HTML5およびCSSプロジェクトに取り組んでおり、コンテナーを正しく表示するのに問題があります。
私が欲しいのは、上部のヘッダーバー、他の2つのdivを含むラッパー、そして常にウィンドウの下部またはコンテンツの下部のどちらか下にある下部のフッターです。
スニペットは次のとおりです。
html, body
{
padding: 0;
margin: 0;
}
#wrapper
{
position: absolute;
background-color: purple;
height: 100%;
width: 100%;
margin-top: 0px;
}
header
{
position: absolute;
width: 100%;
height: 80px;
background-color: black;
color: white;
}
#articleContainer
{
background-color: blue;
width: 75%;
margin-left: auto;
margin-right: auto;
height: auto;
margin-top: 80px;
}
#articleContent
{
width: 70%;
background-color: yellow;
float: left;
}
#articleSideBar
{
position: relative;
width: 28%;
background-color: green;
float: right;
margin-left: 2px;
margin-right: 2px;
display: inline;
margin-top: 0px;
float: right;
height: auto;
}
<html>
<head>
<title>index</title>
<link href="ArticleStyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<header>
Header
</header>
<div id="articleContainer">
Article Container
<div id="articleContent">
The quick brown fox jumped over the lazy dogs back. All good men must come to the aid of the party
</div>
<div id="articleSidebar">
Article Sidebar
</div>
</div>
</div>
</body>
</html>
現時点では、articleContainerは、行がいくつあっても高さだけです。画面の残りの部分を埋めるためのformContainerが必要です。高さを追加してみました:100%; 属性ですが、これは画面サイズを超えるフォームコンテナを感じます。つまり、ヘッダーとほぼ同じ高さの垂直スクロールバーが表示されます。スクロールバーなしでformContainerに利用可能な画面スペースを埋めさせるにはどうすればよいですか。ただし、コンテンツがフォームコンテナよりも大きい場合は、余分なスペースを埋めるために拡張する必要があります。
あなたが提供できるどんな助けにも感謝します。