Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10

Thread: Div height

  1. #1
    Senior Member
    Join Date
    Aug 2011
    Posts
    228
    Member #
    29153
    Liked
    4 times

    Div height

    I have a div that I have the height set to 100%. It does not fill the container to 100%. What have I done wrong?

  2.  

  3. #2
    Senior Member
    Join Date
    Feb 2006
    Posts
    798
    Member #
    12463
    Liked
    302 times
    Since you have provided so little information, my guess is that the container CSS is set to have padding. If so, create a class in your CSS file with 0 PX padding and give this container the same class.

  4. #3
    Senior Member
    Join Date
    Aug 2011
    Posts
    228
    Member #
    29153
    Liked
    4 times
    Even if the container is 10,000 px, the div that I have set to 100% is the same height which is about 600px. It's not that it almost fills it up. It may overflow a little or not even come close. It's the exact same height every time no matter how much content is in the main div.

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,805
    Member #
    5580
    Liked
    726 times
    Give us a link to the page so we can see it.

    Vertical div height is hard to do because of device screen sizes and normal infinite vertical scrolling.

    Horizontal is easier because it is basically finite ... based on most screen sizes.


  6. #5
    Senior Member
    Join Date
    Aug 2011
    Posts
    228
    Member #
    29153
    Liked
    4 times
    Here's a link to the page I'm currently working on. It may change from minute to minute

    aspecialspot.com/horseback-riding

  7. #6
    Senior Member
    Join Date
    Aug 2011
    Posts
    228
    Member #
    29153
    Liked
    4 times
    If I have .elem-a as my parent div that each page has a different amount of content and will be a different height depending on the amount of content. And I have .elem-b as the child div that I set the height:100%; then why does it not fill the parent div 100%. I can understand that if the parent has a padding: 10px; and it not filling that padding, but if the parent div is longer then the height of the monitor then the child div will only reach the height of the monitor.


    I have the child div set float:left and at the bottom of the child div, the content in the parent div will justify to the left below the child div.

  8. #7
    Senior Member
    Join Date
    Aug 2011
    Posts
    228
    Member #
    29153
    Liked
    4 times
    https://codepen.io/glennbates/pen/JZEybZ
    I want the blue side div to go from top to bottom. I have it set to 100% so why doesn't it fill 100%?

  9. #8
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,805
    Member #
    5580
    Liked
    726 times
    You need to make your two columns into two different divs (d2 and d3).
    Then put them both into one div (d1).

    Define a display as 'flex' (d1) and then tell the one column (d2) to 'flex'.
    This relates to d1 as the parent, and d2,d3 as the children.

    https://www.w3schools.com/css/css3_flexbox.asp


    Try this;

    The HTML:
    Code:
    <div class="d1">
    
      <div class="d2">
        <a href="alink.com">a</a><br>
        <a href="blink.com">b</a>
      </div>
    
    <div class="d3">  
      a<br>
      bunch<br>
      of<br>
      content<br>
      goeeees<br>
      here<br>
      in<br>
      this<br>
      place.  Now is the time to Now is the time to Now is the time to Now is the time to Now is the time to Now is the time to Now is the time to 
    </div>
    
    </div>

    The CSS:
    Code:
    .d1 {
      display: flex; /* equal height of the children */
        background-color: white;
      width:100%;
    }
    .d2 {
      flex; /* make this flex to the width of the other children */
      background-color: #e5e5e5;
        border-right: 1px solid #828282;
        width: 150px;
        margin-right: 8px;
        float: left;
        padding: 8px;
    }
    .d3 {
      background-color: #ededed;
        float: left;
        padding: 8px;
    }
    Last edited by mlseim; Jun 09th, 2018 at 07:56 PM.


  10. #9
    Senior Member
    Join Date
    Aug 2011
    Posts
    228
    Member #
    29153
    Liked
    4 times
    That did it. I had to do a little more doctoring it up but that got me what I needed! Thanks a million.

  11. #10
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,805
    Member #
    5580
    Liked
    726 times
    Glenn, looks good.

    I would suggest you put a <div> </div> around each section. That will separate them. The horizontal line is currently spilling over the right side with certain screen sizes.

    Something like this:

    Code:
    <div class='section'>
    <h2>Smokemont Riding Stable</h2>
    <img style="float:left; margin:0px 10px 10px 0px; border:1px solid black;" src="/images/smokemont-riding-stable/smokemont-riding-stable-1.jpg" width="250" alt="Smokemont Riding Stable" title="Smokemont Riding Stable" />
    
    <p>Smokemont Riding Stable offers a safe, fun, family friendly horseback riding experience within the Great Smoky Mountains National Park. Our natural riding trails feature beautiful wooded scenery, native flora and fauna, and mountain streams and waterfalls.</p>
    <p> All horses are well trained and experienced
    mountain trail horses.
    
    <p>Friendly, knowledgeable, experienced guides help make a truly enjoyable riding experience.</p>
    <p>Same onsite manager for more than 18 years.</li>
    <p>Groups are welcome, but please call for reservation or advance notice.</p>
    <p>Great fun for the whole family! Beginner and experienced riders welcome.</p>
    
    <hr width="75%">
    
    </div>
    You could make a bottom border on each class instead of the hr.

    Also ... what is the </li> on this line?

    <p>Same onsite manager for more than 18 years.</li>



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:51 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com