3 бок о бок divs, высота по размеру окна, без внешних css

Я делаю простую HTML-страницу с тремя разделителями, расположенными бок о бок, с центральной, содержащей изображение, такое же высокое, как и окно, и оно должно быть полностью самодостаточно в одном HTML-коде, без внешнего материала.3 бок о бок divs, высота по размеру окна, без внешних css

Я только управлял изменение размеров материала (который ломается, как только он будет помещен в DIV):

<head> 
    <style> 
     * { 
      padding: 0; 
      margin: 0; 
     } 

     .fit { 
      max-width: 100%; 
      max-height: 100%; 
     } 

     .center { 
      display: block; 
      margin: auto; 
     } 
    </style> 

    <script src="code.jquery.com/jquery-latest.js"></script>; 
    <script type="text/javascript" language="JavaScript"> 
     function set_body_height() { 
      var wh = $(window).height(); 
      $('body').attr('style', 'height:' + wh + 'px;'); 
     } 

     $(document).ready(function() { 
      set_body_height(); 
      $(window).bind('resize', function() { 
       set_body_height(); 
      }); 
     }); 
    </script> 
</head>

источник

2016-10-20 Marta

Можете ли вы показать, что вы уже сделали, пожалуйста? – Yoda

Добро пожаловать в переполнение стека! Пожалуйста, разверните свой вопрос немного. Нам нужно увидеть код в виде [Минимального, полного и проверяемого примера] (http://stackoverflow.com/help/mcve) с подробными сведениями о том, что вы пытаетесь выполнить в дополнение к тем, re и любые ошибки. См. [Как спросить] (http://stackoverflow.com/help/how-to-ask). – tektiv

Место, где я находилась <сценарий SRC = "http://code.jquery.com/jquery-latest.js"> <тип скрипта = "текст/JavaScript" язык = "JavaScript"> функция set_body_height() { var wh = $ (window) .height(); $ ('body'). Attr ('style', 'height:' + wh + 'px;'); } $ (document) .ready (function() { set_body_height(); $ (window) .bind ('resize', function() {set_body_height();}); }); (+ body with pic) – Marta

ли вы имеете в виду, как это?

<div style="float:left; width:33%; background-color:#003366;">test</div> 
<div style="float:left; width:33%; background-color:#004366;">test</div> 
<div style="float:left; width:33%; background-color:#005366;">test</div>

источник

2016-10-20 14:37:34 Gildas

Да, но с изменением размера работы – Marta

«Никаких внешних вещей», я предполагаю, что вы имеете в виду, что вы хотите добавить стиль в один HTML документ? Это можно сделать, добавив его в заголовке или в строке, как это делал @Gildas.

Я думаю, что вы можете делать то, о чем вы просите, с помощью flexbox.

HTML:

<div class="wrapper"> 
    <div class="wrap-item">div 1</div> 
    <div class="wrap-item wrap-img"> div 2 with img</div> 
    <div class="wrap-item"> div 3</div> 
</div>

CSS:

.wrapper{ 
    width: 80vw; 
    height: 100vh; 
    border: 1px solid black; 
    margin: 0 auto; 
    display: flex; 
    flex-flow: row nowrap; 
    justify-content: center; 
    align-items: center; 
} 
.wrap-item{ 
    width: 100%; 
    height: 80%; 
    border: 1px solid red; 
} 

.wrap-img{ 
    height: 100%; 
    border: 1px solid blue; 
}

Вот это codepen

источник

2016-10-20 14:47:20 Froy

Нет, это не меняет размер изображения height :( – Marta

Извините, позвольте мне перефразировать это: точка имеет полностью отзывчивую страницу со всем видимым содержимым независимо от размера окна – Marta

3 бок о бок divs, высота по размеру окна, без внешних css

ответ

Смежные вопросы