1

ここにアクセスしてください: http://demo.thecogworks.co.uk/umbraco/login.aspx

このアカウントでログインします: ユーザー: demo パスワード: password

ここで、ブラウザ ウィンドウのサイズを変更して、ブラウザ ウィンドウに合わせて div のサイズが変更されることを確認します。cssだけでは無理だと思います。私は正しいですか？どうすればそのようなものを作成できますか？

4

3 に答える 3

4

css のみで機能します (モバイル デバイスで適切に表示する場合は、「viewport」メタ タグを使用することもできます)。

HTML ページをそのように動作させたい場合は、% を幅 (幅: 100% など) として使用する必要があります。この場合、div の幅は、ビューポートのサイズに基づいて (関連して) 決まります。

いわゆるフレキシブルレイアウトです。これは、レスポンシブ Web ページを作成するための要素の 1 つです。

ここで詳細を読むことができます：

于 2013-02-27T03:11:54.827 に答える
4

提供された例のページはプレーンな CSS を使用していませんが、javascript を使用してウィンドウのサイズ変更時に CSS をレンダリングしています。

あなたの例の行（html出力にインラインスタイルを使用）：

<div id="treeWindow" class="panel" style="height:380px;width:200px;">

そのため、ドキュメント スタイルの例のすべてのメジャーには絶対単位 (px) が割り当てられており、ブラウザー ウィンドウのサイズ変更では調整されません。したがって、サイズを変更するには、次のようなものを使用します

var clientWidth=jQuery(window).width();
var leftWidth=parseInt(clientWidth*0.25);

新しいブラウザウィンドウの幅を取得し、高さについても同様

var clientHeight=jQuery(window).height()-48;
var treeHeight=parseInt(clientHeight-5);

と関数

function resizeGuiWindow(windowName,newWidth,newHeight,window){
   resizePanelTo(windowName,false,newWidth,newHeight);
}

その後、treeWindow オブジェクトに適用されます

resizeGuiWindow("treeWindow",leftWidth,treeHeight);

これは、サンプル ページのソース コードで確認できます。ただし、スタイルで相対単位を使用することにより、css だけですべてを行うことができます。

レスポンシブ デザイン、アダプティブ CSS、流動的なレイアウトの詳細をご覧ください。

編集： Georgiiとほぼ同時に回答を投稿しました。彼はあなたのサンプルページに関する質問に直接答えませんでしたが、彼の言うことはすべて正しく、CSS のみで同様のページを構築するためのすべての情報を見つけることができる柔軟なレイアウトに関するいくつかの優れたソースを追加しました.

于 2013-02-27T03:13:50.270 に答える
3

流動的なレイアウトを再検討した後、最終的にCSS（javascriptなし）でレイアウト全体を作成できるようになりました。jsfiddleの作業バージョンは次のとおりです。http：//jsfiddle.net/Yv4ja/後で必要になる可能性のある人のために：

CSS：

    .left{
    position:absolute;
    width:30%;
    background:red;
    left:0;
    bottom:0px;
    top:100px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.right{
    overflow:hidden;
    background:green;
    position:absolute;
    right:0;
    width:70%;
    bottom:0px;
    top:100px;
}

html, body{
    min-height:100%;
    height:100%;
    padding:0px;
    margin:0px;
    position:relative;
}



.header{
    width:100%;
    height:100px;
    background:yellow;
}

.left .content {
    background:blue;
    position:absolute;
    top:5px;
    left:5px;
    right:5px;
    bottom:100px;
    overflow:auto;
    padding:5px;
    border:1px solid yellow;
}

.left .bottom-content {
    height:100px;
    position:absolute;
    left:5px;
    right:5px;
    bottom:5px;
    background:black;
}

HTML：

<div class="header">header</div>
<div class="wrapper">
    <div class="left">
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam adipiscing augue a porta. Sed fringilla sodales nisl ut iaculis. Aenean eu arcu lectus. Vivamus ut felis nibh, eu rutrum magna. In auctor varius ullamcorper. In diam turpis, ornare id pellentesque at, blandit et magna. Integer eget dolor tortor, sed vehicula magna. Quisque metus turpis, mollis porta feugiat vel, condimentum in eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu mi est, vel euismod velit. Vestibulum ante odio, molestie ut imperdiet eget, aliquet nec elit. Aenean arcu massa, vestibulum eu convallis ut, porttitor ut orci. Fusce eget sem augue, vitae placerat velit. Suspendisse interdum, nulla eget pharetra cursus, nunc elit iaculis nisl, vitae fringilla massa purus nec nunc. Quisque rutrum ornare turpis quis blandit. Mauris venenatis convallis elementum.

Etiam ut magna dolor. Sed eget purus ut nulla feugiat egestas. Quisque quam ligula, dapibus non cursus quis, commodo at quam. Vivamus porttitor, urna nec ultricies scelerisque, massa purus congue ligula, in egestas lectus magna eget est. Ut commodo viverra augue non semper. Suspendisse potenti. In mollis ultrices posuere. Integer mollis, lacus et pretium molestie, elit felis tincidunt elit, at pellentesque turpis diam lacinia quam.

Aenean vehicula, lorem et adipiscing molestie, orci nisl vulputate dui, et tempor erat nibh eget dolor. Nullam posuere lorem eu diam imperdiet et molestie arcu lobortis. Mauris vestibulum mollis lacus non imperdiet. Morbi tortor tortor, pulvinar nec viverra vitae, laoreet nec urna. Quisque in urna turpis. Nullam vel diam dui. Nunc scelerisque, arcu id pulvinar consectetur, purus elit euismod justo, in convallis lacus nisi vel velit.

Aliquam porttitor condimentum sapien at consectetur. Integer ac diam id felis semper pretium. Integer elementum venenatis nunc, ac molestie mauris suscipit sed. Nunc porttitor eleifend ipsum, sit amet ornare lacus dapibus a. Integer adipiscing, quam sed malesuada vehicula, eros erat egestas quam, eu rutrum sem turpis sit amet elit. Pellentesque metus nisl, malesuada et sagittis at, molestie a sapien. Duis vestibulum porta lacus et ultrices.

In auctor vulputate vestibulum. Integer porta quam ante, sed molestie leo. Aliquam cursus enim in augue euismod id porta eros gravida. Mauris lectus ipsum, luctus sit amet consectetur non, venenatis eget ligula. Suspendisse potenti. Vestibulum consequat accumsan orci ut lobortis. Maecenas velit diam, dapibus sit amet tincidunt eu, cursus in erat. Phasellus ac interdum lectus. Phasellus placerat, lacus vitae condimentum placerat, nisl dui varius ipsum, in eleifend metus diam sit amet libero. Vestibulum nec dolor at augue malesuada vestibulum. Praesent euismod, nibh a imperdiet convallis, est leo cursus elit, nec interdum ipsum mauris id urna. Integer at augue diam. Suspendisse tincidunt accumsan porta. Sed vehicula imperdiet velit et sagittis.</div>
        <div class="bottom-content"></div>
        </div>

    <div class="right">right</div>
</div>
于 2013-03-13T03:42:27.593 に答える