1

サイトをレイアウトしようとしています：

http://kenzshop.com/Brandon/index

メインコンテンツ領域（青色）を正しく配置できません。

ヘッダー（赤）には液体があり、サイドバー（黄色）には液体の高さがあり、メインのコンテンツ領域は液体の幅と高さである必要がありますが、正しく位置合わせする方法がわかりません。

ヘッダーと幅方向に揃える必要があります。

誰かが私の問題が何であるかを見ることができますか？

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Title of document</title>
<meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8"></meta>
<meta http-equiv="Content-Type" content="text/css; charset=utf-8"></meta>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
   <div id="header"></div>
   <div id="main"><!--<iframe src="http://www.cnn.com/"/> --></div>
   <div id="sidebar"></div>
</body>

</html>

CSS：

body {
   margin:0;
   padding:0;
   height:100%; 
}

#header{
   height: 80px;
   border: 1px solid black;
   padding: 5px;
   margin-top: 5px;
   margin-left: 5px;
   margin-right: 5px;
   background-color:red;
}

#main{
   position:absolute;
   left:0;
   top:90px;
   right: 263px;
   padding:0;
   margin-top: 12px;
   margin-left: 5px;
   margin-bottom:5px;
   height:99% !important; /* works only if parent container is assigned a height value */
   width:100%;
   border:1px solid black;
   background-color:blue;
}

iframe{
   margin: 5px;
   display:block; 
   width:100%!important; 
   height:100%!important;
}

#sidebar{
   position:absolute;
   right:0;
   top:102px;
   padding:0;
   margin-right:5px;
   margin-bottom:5px;
   width:250px;
   height:99%; /* works only if parent container is assigned a height value */
   border:1px solid black;
   background-color:yellow;
}

指示

4

2 に答える 2

2

position: absoluteそれらは変数がほとんどまたはまったくないため、柔軟性に影響を与えることなく、に依存することで簡単に解決できます。

HTML:

<header class="header"></header>

<div class="content">
    <iframe src="http://www.cnn.com/"></iframe>
</div>

<div class="sidebar"></div>

CSS:

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.header,
.content,
.sidebar {
  position: absolute;
  border: 1px solid black;
}

.header {
    top: 5px;
    right: 5px; 
    left: 5px; 
    height: 80px;
    background: red;
}

.content,
.sidebar {
    top: 90px;
    bottom: 5px;
}

.content {
    left: 5px;
    right: 260px;
}

.content iframe {
    width: 100%;
    height: 100%;
}

.sidebar {
    right: 5px;
    width: 250px; 
    background: green;
}

こちらをご覧ください: http://jsfiddle.net/joplomacedo/WBRCj/ </p>

于 2012-08-22T02:30:40.440 に答える
2

このようなもの？

HTML:

<div id="header"></div>
<div id="main"></div>
<div id="sidebar"></div>​

CSS:

​#header {
    height: 60px;
    background: red;
    margin-bottom: 10px
}
#main {
    width: 68%;
    background: blue;
    float: left;
    height: 800px;
}
#sidebar {
    width: 30%;
    background:yellow;
    float: right;
    height: 800px;
}​

そしてフィドル

PSどちらも異なるコンセプトに従っているように見えるため、現在のサイトに基づいているか、投稿された画像に基づいているかはわかりません. とりあえずイメージしました。

于 2012-08-22T00:47:51.113 に答える