2015-03-02 5 views
0

Я пытаюсь прокрутить специальный тег div, но это не работает.Как прокрутить тег div в стиле CSS?

<body style="margin:0; padding:0;"> 
<div id="head" style="width:100%; height:18%; background:#2a2a2a; position:fixed; overflow-y:hidden; "> 
<div id="header"> 
<h1>Header</h1> 
</div> 
<div id="headcontent" style="height:20%; widht:100%; background:orange;"> 
<h4>Header content</h4> 
</div> 
</div> 
<div id="content" style="width:100%; height:250%; background:pink; overflow-y:scroll; "> 
</div> 
</body> 

Здесь я хочу, чтобы просмотреть только content тег. Но я использовал position:fixed в теге head, так что только не удалось прокрутить тег содержимого. Как я могу прокрутить только тег содержимого. Я также пробовал <body style="margin:0; padding:0; overflow-y:hidden"> Но он не работает над этим? Как я могу достичь этого?

+0

Проверьте ур стиль элемента тела в вашем вопросе у отметить переполнение-у: hiedden вместо переполнения -y: скрытый проверить это – rJ7

ответ

0

Процентная высота на div не будет удерживаться. Если вы даете высоту: 250%; высота набора пикселей будет работать для вас.

<body style="margin:0; padding:0;"> 
 
    <div id="head" style="width:100%; height:18%; background:#2a2a2a; position:fixed; overflow-y:hidden; "> 
 
    <div id="header"> 
 
     <h1>Header</h1> 
 
    </div> 
 
    <div id="headcontent" style="height:20%; widht:100%; background:orange;"> 
 
     <h4>Header content</h4> 
 
    </div> 
 
    </div> 
 
    <div id="content" style="width:100%; height:250px; background:pink; overflow-y:scroll; "> 
 
    <h1>Bender Gets Made</h1> 
 
    <p>Your best is an idiot! You guys go on without me! I'm going to go&hellip; look for more stuff to steal! You mean while I'm sleeping in it? And from now on you're all named Bender Jr. Michelle, I don't regret this, but I both rue and lament it.</p> 
 
    <h2>Love and Rocket</h2> 
 
    <p>Who am I making this out to? You lived before you met me?! Wow! A superpowers drug you can just rub onto your skin? You'd think it would be something you'd have to freebase.</p> 
 
    <ul> 
 
     <li>Say what?</li> 
 
     <li>Ow, my spirit!</li> 
 
     <li>Five hours? Aw, man! Couldn't you just get me the death penalty?</li> 
 
    </ul> 
 
    <h3>Bend Her</h3> 
 
    <p>As an interesting side note, as a head without a body, I envy the dead. Ok, we'll go deliver this crate like professionals, and then we'll go ride the bumper cars. I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense. 
 
     She also liked to shut up! Man, I'm sore all over. I feel like I just went ten rounds with mighty Thor.</p> 
 
    <h4>Lethal Inspection</h4> 
 
    <p>Oh, all right, I am. But if anything happens to me, tell them I died robbing some old man. Ow, my spirit! A true inspiration for the children. Yeah, I do that with my stupidness. Switzerland is small and neutral! We are more like Germany, ambitious 
 
     and misunderstood! Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal?</p> 
 
    <ol> 
 
     <li>File not found.</li> 
 
     <li>And remember, don't do anything that affects anything, unless it turns out you were supposed to, in which case, for the love of God, don't not do it!</li> 
 
    </ol> 
 
    <h5>Lesser of Two Evils</h5> 
 
    <p>Five hours? Aw, man! Couldn't you just get me the death penalty? Bender, I didn't know you liked cooking. That's so cute. Ugh, it's filthy! Why not create a National Endowment for Strip Clubs while we're at it? OK, this has gotta stop. I'm going to 
 
     remind Fry of his humanity the way only a woman can. In our darkest hour, we can stand erect, with proud upthrust bosoms. Yes, I saw. You were doing well, until everyone died.</p> 
 
    <h6>Crimes of the Hot</h6> 
 
    <p>You've killed me! Oh, you've killed me! Professor, make a woman out of me. Ah, the 'Breakfast Club' soundtrack! I can't wait til I'm old enough to feel ways about stuff! Hey, guess what you're accessories to.</p> 
 
    <p>And why did 'I' have to take a cab? Humans dating robots is sick. You people wonder why I'm still single? It's 'cause all the fine robot sisters are dating humans! Oh, all right, I am. But if anything happens to me, tell them I died robbing some old 
 
     man. Well, then good news! It's a suppository. Fry, we have a crate to deliver.</p> 
 
    <p>In our darkest hour, we can stand erect, with proud upthrust bosoms. Please, Don-Bot&hellip; look into your hard drive, and open your mercy file! Hey, guess what you're accessories to. Uh, is the puppy mechanical in any way? You can crush me but you 
 
     can't crush my spirit!</p> 
 
    <p>There's one way and only one way to determine if an animal is intelligent. Dissect its brain! I can explain. It's very valuable. Calculon is gonna kill us and it's all everybody else's fault! Anyhoo, your net-suits will allow you to experience Fry's 
 
     worm infested bowels as if you were actually wriggling through them. Why would I want to know that? OK, this has gotta stop. I'm going to remind Fry of his humanity the way only a woman can.</p> 
 
    <p>Who are you, my warranty?! And then the battle's not so bad? Shinier than yours, meatbag. Say what? I can explain. It's very valuable.</p> 
 
    <p>Why, those are the Grunka-Lunkas! They work here in the Slurm factory. Bender! Ship! Stop bickering or I'm going to come back there and change your opinions manually! These old Doomsday Devices are dangerously unstable. I'll rest easier not knowing 
 
     where they are. Can I use the gun? Good news, everyone! I've taught the toaster to feel love!</p> 
 
    <p>You don't know how to do any of those. No, of course not. It was&hellip; uh&hellip; porno. Yeah, that's it. The key to victory is discipline, and that means a well made bed. You will practice until you can make your bed in your sleep.</p> 
 
    <p>Yeah, I do that with my stupidness. I can explain. It's very valuable. And so we say goodbye to our beloved pet, Nibbler, who's gone to a place where I, too, hope one day to go. The toilet.</p> 
 
    <p>Daylight and everything. WINDMILLS DO NOT WORK THAT WAY! GOOD NIGHT! For the last time, I don't like lilacs! Your 'first' wife was the one who liked lilacs! No. We're on the top. Hey! I'm a porno-dealing monster, what do I care what you think? I videotape 
 
     every customer that comes in here, so that I may blackmail them later.</p> 
 
    <p>Oh, I don't have time for this. I have to go and buy a single piece of fruit with a coupon and then return it, making people wait behind me while I complain. Soothe us with sweet lies. I suppose I could part with 'one' and still be feared&hellip; 
 
     Tell them I hate them.</p> 
 
    <p>Just once I'd like to eat dinner with a celebrity who isn't bound and gagged. What's with you kids? Every other day it's food, food, food. Alright, I'll get you some stupid food. Kids don't turn rotten just from watching TV. Whoa a real live robot; 
 
     or is that some kind of cheesy New Year's costume?</p> 
 
    <p>Can I use the gun? What are their names? Wow, you got that off the Internet? In my day, the Internet was only used to download pornography. I never loved you. Yes. You gave me a dollar and some candy.</p> 
 
    <p>File not found. How much did you make me? I don't want to be rescued.</p> 
 
    <p>Oh, I think we should just stay friends. Why am I sticky and naked? Did I miss something fun? Now what?</p> 
 
    <p>No! The cat shelter's on to me. Oh no! The professor will hit me! But if Zoidberg 'fixes' it&hellip; then perhaps gifts! And remember, don't do anything that affects anything, unless it turns out you were supposed to, in which case, for the love of 
 
     God, don't not do it! Morbo can't understand his teleprompter because he forgot how you say that letter that's shaped like a man wearing a hat.</p> 
 
    </div> 
 
</body>

0

Все хорошо с вашим кодом ..

Просто нужно заменить

высота: 250% с высота: 250px; или% значение, которое вы нужны

Вот полный ход решения ...

<style type="text/css"> 
 
.scroll-my-div { 
 
    background: none repeat scroll 0 0 pink; 
 
    height: 250px; 
 
    overflow-y: scroll; 
 
    width: 100%; 
 
} 
 
</style> 
 

 

 

 

 
<body style="margin:0; padding:0;"> 
 

 
<div id="head" style="width:100%; height:18%; background:#2a2a2a; position:fixed; overflow-y:hidden; "> 
 

 
\t <div id="header"> 
 
\t <h1>Header</h1> 
 
\t </div> 
 

 
\t <div id="headcontent" style="height:20%; widht:100%; background:orange;"> 
 
\t <h4>Header content</h4> 
 
\t </div> 
 

 
</div> 
 

 
<div id="content" class="scroll-my-div"> 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 

 
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). 
 

 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 

 
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). 
 

 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 

 
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). 
 

 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 

 
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). 
 
</div> 
 

 
</body>

Смежные вопросы