为什么不会将div的高度扩展到其子元素?

时间:2017-11-14 14:29:22

标签: html css css-position

我还在掌握css。

所以我从头开始创建我的投资组合网站。当您滚动时,您将看到主要内容由两列布局组成。我的列是固定的,包裹在占据100%宽度的相对div中。内部的两个固定div占据50%的宽度。然后我把内容放在固定的div中 - 就像我的投资组合一样。 但有时固定的div高度不会扩展到其中内容的高度。特别是当你调整大小时。为什么?

这是指向我网站的链接,以便您了解我的意思。 http://parkhargravedesigns.com/



if ($(window).width() > 768) {

  $('.f, .fixedContainer').css('height', $('.text').height());
  $(window).resize(function() {
    $('.f, .fixedContainer').css('height', $('.text').height());
  });

  $('.f2,.fixedContainer2').css('height', $('.text2').height());
  $(window).resize(function() {
    $('.f2,.fixedContainer2').css('height', $('.text2').height());
  });


  $('.f3, .fixedContainer3').css('height', $('.text3').height());
  $(window).resize(function() {
    $('.f3, .fixedContainer3').css('height', $('.text3').height());
  });

}

.fixedContainer,
.fixedContainer2,
.fixedContainer3 {
  position: relative!important;
  width: 100%!important;
}

.headerEle2 {
  display: block!important;
}

.f,
.f2,
.f3 {
  background-color: #293553;
  background-size: cover!important;
  width: 50%!important;
  position: absolute!important;
  top: 0;
  left: 0;
  color: black;
  font-size: 70px;
}

.f2 {
  background-color: #e7384c!important;
}

.text,
.text2,
.text3 {
  background-color: white!important;
  background-size: cover!important;
  color: black;
  position: absolute!important;
  right: 0!important;
  top: 0!important;
  width: 50%!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fixedContainer">
  <div class="f">
    <div id="aboutStuff">
      <p class="fTitle">
        About
      </p>
      <div class="headerEle2 NavDiv"></div>
    </div>

  </div>
  <div id="profilePic">
    <img src="album/profilePic2.png" alt="oops">
  </div>
  <div class="text">

    <h1>I'M A WEB &amp; GRAPHIC DESIGNER FROM B.C, CANADA.</h1>
    <p>
      A strong interest in art and design was my gateway to the creative industry, which led to taking my first steps in the digital world. During my time at North Island College I fell inlove with web design because it allowed me to express my creativity while
      developing the skills necessary to create functionable websites.

    </p>

    <h1>SERVICES:</h1>

    <p>

      <b>Website Design and Development Logo Design</b>
    </p>


    <h1>QUALIFICATIONS:</h1>
    <p>

      <b>HTML
        CSS
        JavaScript
        JQuery
        Illustrator
        Photoshop
      </b>
    </p>

    <h1>EDUCATION:</h1>
    <p>
      <b>Program:</b> Web Design &amp; Interactive Media Certificate
      <b>Where:</b> North Island College, Comox Valley, BC In this program I gained skills in HTML,<br> CSS, Javascript, PHP and Adobe CC.

    </p>
    <h1>DESIGN PROCESS</h1>
    <p>
      A user-centered mindset and sensitivity for design are <br> key concepts I carry throughout the design process.<br><br> This rough framework outlines my process of<br> developing digital experiences: 1. RESEARCH and gather the present state 2. STRUCTURE
      setup and content of the project 3. CONCEPT AND STRATEGY <br> 4. CREATE, evaluate and iterate deliverables like &nbsp;-Site maps &nbsp;-User flow &nbsp;-Sketches and Infographics &nbsp;-Wireframes
    </p>

    <!--
	  <img src = "album/homeFixed.png" alt = "oops" id = "text1Logo">
    -->

  </div>

</div>
&#13;
&#13;
&#13;

0 个答案:

没有答案