html - How to apply overflow:hidden;? -
I need to hide the content-section at the time of going out of page #.
I Need to Use Overflow: Hidden; But I'm not able to apply the desired result to #Page.
How to fix any idea?
& lt; Div id = "btn-up" onclick = "moveUp ();" & gt; UP & lt; / Div & gt; & Lt; Div id = "btn-down" onclick = "moveDown ();" & Gt; Down & lt; / Div & gt; & Lt; Div id = "page" & gt; & Lt; Div id = "bar-header" & gt; Header & lt; / Div & gt; & Lt; Div id = "content" & gt; & Lt; Div class = "content-section item 1" & gt; & Lt; One name = "anchor-1" & gt; & Lt; / A & gt; & Lt; H2 & gt; Content 1 & lt; / H2 & gt; & Lt; / Div & gt; & Lt; Div class = "content-section item 2" & gt; & Lt; One name = "anchor-2" & gt; & Lt; / A & gt; & Lt; H2 & gt; Content 2 & lt; / H2 & gt; & Lt; / Div & gt; & Lt; Div class = "content-section item 3" & gt; & Lt; A name = "anchor-3" & gt; & Lt; / A & gt; & Lt; H2 & gt; Content 3 & lt; / H2 & gt; & Lt; / Div & gt; & Lt; Div class = "content-section item 4" & gt; & Lt; One name = "anchor-4" & gt; & Lt; / A & gt; & Lt; H2 & gt; Content 4 & lt; / H2 & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "bar-footer" & gt; Footer & lt; / Div & gt; & Lt; / Div & gt; / * Reset * / h1, h2, h3, h4, h5, h6 {margin: 0; Padding: 0; } Body {margin: 0; Padding: 0; Background: Transparent; Width: 500px; Height: 200 pixels; } Ul {list-style-type: none; Margin: 0 px; Padding: 0 pixels; } #bar-header, #bar-footer {status: fixed; Left: 0 pixels; Width: 500px; Height: 30px; Z-index: 100; Background color: RGBA (505050,0.5); Text align: center; } #bar-header {top: 0px; } #bar-footer {top: 690px; } #btn-up, #btn-down {status: fixed; Left: 1230px; Width: 50px; Height: 50px; Background color: yellow; Outline: 1 px solid black; Z-index: 200; } #btn-up {top: 0px; } #btn-down {top: 50px; } # Content {status: fixed; } #Content -Internal {Overflow: Hidden; }. Content-section {background-color: lightweight; Outline: 1 px solid black; Width: 50px; } / * Content size * / .item1 {/ * top 0 * / height: 200px; } .item2 {/ * Top 200 * / height: 400px; } .item3 {/ * top 600 * / height: 600px; } .item4 {Height: 800px; }. Content-Section H2 {Status: Relative; Top: 30px; / ** Avoid going under the header bar *.} Active {Background color: Violet! Important; }
You are incorrectly referencing the ID of the sidebar container.
Your rule state
#content {status: fixed; } #Content -Internal {Overflow: Hidden; } but there is no element # content-internal . Use it instead:
# content {status: fixed; Hidden flurry; } Result in:
Comments
Post a Comment