如何更好地創建CSS比HTML框架？

我是新來的CSS和想知道如何更好地創建框架在CSS比HTML框架？爲了學習，我想創建一個具有2個相等大小的幀的屏幕，第一幀分爲2列。有人能指導我，我該如何開始呢？如何更好地創建CSS比HTML框架？

來源

2011-06-06 Supriya

在你的框架內創建CSS – Ibu 2011-06-06 06:41:51

框架在定義上是一個不好的選擇，因爲它們破壞了訪問者對網絡流動的固有理解 - >後退按鈕並不總是回到以前的視圖。使用'div's和css''position'或'flow'的佈局 – Bazzz 2011-06-06 06:43:47

爲什麼你不問Google'css frames'之前問這個？ – trutheality 2011-06-06 06:49:52

您可以使用div標籤和overflow CSS屬性來模擬框架。

演示：http://jsfiddle.net/wdm954/wPywB/

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()); 
    }); 

});

來源

2011-06-06 14:08:42 wdm

爲您完成了一個例子。只需將「框架」類添加到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>

來源

2011-06-06 14:34:06 Midas

這個例子不起作用，左側和右側的列是堆疊的。 – Martin 2016-03-25 12:17:13

許多謝謝你們！這是我如何做：

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>

來源

2011-06-07 05:01:10 Supriya

如果您從另一個答案得到答案，請不要自己發佈答案，而應接受最能幫助您的答案。 – Kissaki 2011-06-08 01:00:12

您可以使用JavaScript框架庫。

不要忘了在你的腦袋部分聲明字符集爲UTF-8：

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

<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>

簡單易用的解決方案。

來源

2016-11-27 05:34:37 user219751

如何更好地創建CSS比HTML框架？

回答

相關問題