Как лучше создавать фреймы в css, чем html?

#html #css

#HTML #css

Вопрос:

Я новичок в css и хочу знать, как лучше создавать фреймы в css, чем фреймы html? Для обучения я хочу создать экран с 2 фреймами одинакового размера, причем первый фрейм разделен на 2 столбца. Может кто-нибудь, пожалуйста, подсказать мне, с чего мне начать?

1. создайте css внутри вашего фрейма

2. фреймы по определению являются плохим выбором, потому что они разрушают присущее посетителю понимание веб-потока -> кнопка «Назад» не всегда возвращает к предыдущему просмотру. Используйте макет с div s и css’ position или flow

3. Почему бы вам не погуглить css frames , прежде чем задавать этот вопрос?

4. Что такое фреймы css? Что вы пробовали? Код был бы полезен для уточнения того, что вы пытаетесь сделать и сказать.

Ответ №1:

Вы можете имитировать фреймы с помощью 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() );
    });

});

Ответ №2:

Сделал для вас пример. Просто добавьте класс ‘frame’ в div , и это будет выглядеть как фрейм. Отлично работает в IE5.5 и Safari 5 (браузерах, которые я тестировал).

Также добавлен класс ‘border’ для имитации полосы перетаскивания рамки. Но вы, вероятно, хотите что-то более стильное. 😛

Нажмите здесь для примера.

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>

Ответ №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>

Ответ №4:

вы можете использовать библиотеку фреймов Javascript.

не забудьте объявить кодировку как Utf-8 в разделе head:

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

Простое и понятное решение.