Question

我是css的新手，想知道在CSS中创建帧比用html帧更好吗？为了学习，我想创建一个具有2个相等大小的帧的屏幕，第一帧分为2列。有人可以指导我如何开始吗？

Answer 1

您可以使用div标记和overflow CSS属性来模拟框架。

HTML ...

<div id="a">
    <div class="col1">testing col1</div>
    <div class="col2">testing col2</div>
</div>
<div id="b">
    Test test test.
</div>

... CSS

#a, #b {
    width: 50%;
    height: 400px;
    float: left;
    overflow-y: scroll;
}
#a .col1, #a .col2 {
    width: 50%;
    float: left;  
}

您可以选择使用一些jQuery来动态设置类似框架的列的高度......

$(document).ready(function() {

    $('#a, #b').height( $(window).height() );
    $(window).resize(function() {
        $('#a, #b').height( $(window).height() );
    });

});

Answer 2

为你做了一个例子。只需将“框架”类添加到div，它就像一个框架。在IE5.5 +和Safari 5（我测试过的浏览器）中工作正常。

还添加了“边框”类来模拟框架“拖动”栏。但你可能想要更时尚的东西。：P

Click here for an example.

<强> CSS：

* {
    margin:0;
    padding:0
}
html, body {
    overflow:hidden;
    width:100%;
    height:100%
}
body {
    background:lightgrey
}
.frame {
    float:left;
    width:49.5%;
    height:100%;
    overflow:auto
}
.frame .frame {
    background:cyan
}
.frame.border {
    border-right:3px ridge buttonface
}

<强> HTML：

<div class="frame">
    <div class="frame border">
        <p>Left column</p>
    </div>
    <div class="frame">
        <p>Right column</p>
    </div>
</div>
<div class="frame">
    <p>Right frame</p>
</div>

Answer 3

非常感谢你！这就是我的方式：

CSS

    body{
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    height: 100%; 
    max-height: 100%; 
    }
#framecontent{
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 320px; 
    overflow: auto; 
    }

    #maincontent{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 130px; 
    overflow: hidden; 
    background: #fff;
    }

    .innermargin{
    margin: 15px;
    }

HTML

    <div id="framecontent">
    <div class="innermargin">

    <h4>Search Result</h4>

    </div>
    </div>


    <div id="maincontent">
    <div class="innermargin">
    <h4>Search Criteria</h4>
    </div>
    </div>

Answer 4

您可以使用Javascript框架库。
不要忘记在你的头部宣布charset为Utf-8：

<meta content="text/html; charset=utf-8" http-equiv="content-type">

＆＃13;

<div id="thewin"></div>
<script src="http://pastebin.com/raw/kR6B0XCY"></script>
<script>
   //you can create multiple frames to.
  createnewwindow("my frame","thewin","windowid","<h5>my contents</h5><button onClick=\"wht()\">change to white</button>");
  function wht(){
  setdefcol("white");  //optional semi transparent gray is default
  hidefrm("windowid")
  showfr("windowid");
  }
  </script>

＆＃13;

＆＃13; 简单易用的解决方案。

如何更好地在CSS中创建帧而不是html？

4 个答案: