3 개의 사이드 바이 사이드 div, 윈도우에 맞는 높이, 외부 CSS 없음

3 개의 div가 나란히 배치 된 간단한 HTML 페이지를 만들고 있는데, 중앙 HTML은 창 크기만큼 사진을 포함하고 있습니다. 하나의 HTML 코드에는 자체 포함되어 있으며 외부에는 없습니다.3 개의 사이드 바이 사이드 div, 윈도우에 맞는 높이, 외부 CSS 없음

<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

스택 오버플로에 오신 것을 환영합니다! 귀하의 질문을 조금 확장하십시오. 우리는 당신이 무엇을 달성해야 하는지를 설명하는 세부 사항과 함께 [Minimal, Complete, and Verifiable example]의 형태로 코드를 볼 필요가있다. 다시하고 어떤 오류. [How to Ask] (http://stackoverflow.com/help/how-to-ask)를 참조하십시오. – tektiv

이것은 내가있는 곳입니다. <스크립트 SRC = "http://code.jquery.com/jquery-latest.js"> <스크립트 유형 = "텍스트/자바 스크립트"언어 = "자바 스크립트"> 기능 set_body_height() { var wh = $ (window) .height(); $ ('body'). attr ('style', 'height :'+ wh + 'px;'); } $ (문서) .ready (함수() { set_body_height(); $ (창) .bind ('크기 조정'기능() {set_body_height();}); }); (사진이있는 몸체) – 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

아니요,이 그림의 높이가 조정되지 않습니다. ( – Marta

죄송합니다.이 말을 바꾸게 해주십시오. 요점은 모든 콘텐츠를 창 크기와 상관없이 볼 수있는 완전히 반응하는 페이지입니다. – Marta

3 개의 사이드 바이 사이드 div, 윈도우에 맞는 높이, 외부 CSS 없음

답변

관련 문제