0

私がやろうとしているのは、「ポートフォリオ」ページを作成することです。しかし、ユーザーのブラウザのサイズに「完全に収まる」ようにしたいです（ユーザーが装備している画面のサイズに関係なく、ページのコンテンツが常に完全に表示されるように）。したがって、ページは「サイズ変更可能」であり、ワイドスクリーン、デスクトップ、タブレット、または携帯電話で常に 100% の幅と 100% の高さを表示する必要があります。ブラウザでうまく。

これは私がこれまでに作ったものですが、良くありません。

http://jsfiddle.net/MPQXF/50/

また、画面の高さまたは幅のサイズを変更すると、白いフレーム (8 つの青いフレームとともに、フレームの「上部」部分から飛び出します。ブラウザのサイズを変更しても、伸びたり収まったりしません。

ところで、青いフレームは小さな画像 (250x250 としましょう) を表す必要があります。

<section id="home">
    <div class="upper">
        <div class="frame" align="center">
            <div class="innerframe">
            </div>
            <div class="innerframe">
            </div>
            <div class="innerframe">
            </div>
            <div class="innerframe">
            </div>
            <div class="innerframe">
            </div>
            <div class="innerframe">
            </div>
            <div class="innerframe">
            </div>
            <div class="innerframe">
            </div>
        </div>
    </div>
    <div class="lower">
    </div>
</section>
4

2 に答える 2

0

一部の div では幅をパーセンテージで指定しており、そのうちのいくつかでは幅と高さが px で固定されています。目的の動作が必要な場合は、すべてが %s にあることを確認してください。

%s ですべてを作成するように CSS を変更しました。Pls はテストして、正常に動作するかどうかを確認します。それはフィドルで行います。

html, body{
  margin:0px;
  padding:0px;
  height:100%;
}

section{
    height:50%;
    width:100%;
}

div{
    height:100%;
    width:100%;
}

.upper{
    background:orange;
}

.lower{
    background: green;
}

.frame{
  width: 35%;
  margin-left: auto;
  margin-right: auto;
  top:15%;
  height: 40%;
  background: #f6f6f6;
  position: relative;
  border-radius:3px;
}

.innerframe{
    width:20%;
    background:blue;
    display:inline-block;
    border-radius:3px;
    height:42%;
}
于 2013-06-27T11:58:52.133 に答える
0

このcssを使用します。緑のdivも表示されるようになりました

    html, body{
  margin:0px;
  padding:0px;
  height:100%;
}

section{
    height:50%;
    width:100%;
}


.upper{
    background:orange;
}

.lower{
    background: green;
    height: 100%;
}

.frame{
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
  top:30px;
  background: #f6f6f6;
  position: relative;
  border-radius:3px;
    overflow: hidden;
}

.innerframe{
    width:40px;
    background:blue;
    display:inline-block;
    border-radius:3px;
    height:40px;
}
于 2013-06-27T11:59:11.633 に答える