CODEWITHSUNDEEP
javascripthtmlcss
TulMagar
TulMagar

Reputation: 49

Scroller isn't displaying on the screen

I am having an issue with the position-fix; top 100px;. when I use position-fix; top 100px; and run the program, the result will be "google scroller doesn't show up on the screen". when I don't use when I use position-fix; top 100px; then google scroller shows up on the screen.

Here is the HTML code. 

<body>
  <section class="container">
    <div style="position:fixed; top:180px" class="First">
      <ul id="ListName" class="">
        <li><a style="text-decoration:none" href="interest.html"> Interest </a></li>
      </ul>     
    </div>


    <div style="position:fixed; top:180px;" class="Second">
      <h1  align="center"> sport</h1>

         <p>

          <ul>
            <li> soccer and,</li>
            <li> football </li>
          </ul>

        </p>

   </div>
 </section>

 <div id="" class="" style="clear:both;"></div>
</body>

Here is the CSS code.

<style>
        .container {
            width: 99%;
            height: auto;
            margin: auto;
            padding: 10px;
            font-family: Verdana,Geneva,Tahoma,Arial,Helvetica,sans-serif!important;
        }
        .First {
            height: auto;
            width: 20%;
            background: white;
            border:1px solid #666;
            float: left;
        }
        .Second {
            margin-left: 21%;
            height: auto;
            width:640px;
            border:1px solid #666;
            background: white;
        }



</style>

Upvotes: 1

Views: 64

Answers (1)

Saroj
Saroj

Reputation: 1571

Your requirement is bit confusing, it's not clear that whether you want to make the second div inside the section element scrollable then you can do it by adding a height or max-height property to the Second class.

Same holds true for any container scroll bar appear only when the content inside a div or any container exceeds the height specified.

If you want to make second div scrollable, you need to do following.

   .Second {
      height:100px !important;
      overflow-y: scroll !important;
      margin-left: 21%;
      height: auto;
      width: 640px;
      border: 1px solid #666;
      background: white;
   }

If you want to make body element scrollable then you can set a height property or when your content increases the automatically body will be scrollable.

checkout the fiddle here.

I have added a width property to the second div in order to make it fit in the fiddle window.You may remove it. Also pasted some sample text inside body to demonstrate that body is scrollable when it has enough text or if you want a set a fix height you can do that as well.

NOTE: you need to set the property value with !important so that it overrides and forces browser to apply that css.

height:100px !important;

Hope it helps!!

Upvotes: 1

Related Questions