适合内容窗口的滚动条

时间:2013-08-08 19:00:14

标签: html css

我正在尝试修复我的网页,以便滚动不同网页的动态内容。我'修复了'页眉,页脚和侧边栏。我试过溢出:auto,overflow:scroll;等,但他们没有正常工作。有些页面我看不到整个内容。我不是专业人士,我是一个尝试创建和维护几个不同网站的狂热爱好者。 (不,即使他们有钱,我的Toastmasters也不会支付专业费用。

我对我发现的小提琴很着迷,它根本不使用溢出。 它最初没有页脚,我添加它来准确模拟我网站上发生的事情。请注意,滚动条将继续显示在页眉和页脚的旁边。

http://jsfiddle.net/inquii/Nrs2u/4/

CSS:

html, body {
    height: 100%;

}

body {
    height: 100%;
}

.static {
    width:996px;
    z-index:2;
    height:150px;
    position: fixed;
}

#header {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-style: normal;
    height: 172px;
    width: 996px;
    min-width: 850px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    background-image: url(images/wga_banner.jpg);
    position: fixed;
    top:0px;
}


#wrapper {
    background-color: #FFF;
    margin-top: 0px;
    padding-top: 0px;
    width: 994px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    height: auto;
}

#sidebar {
    background-color: #FFF;
    width: 202px;
    float: left;
    margin-top: 0px;
    margin-right: 0px;
    height: 100%;
    min-height: 700px;
    position: fixed;
    top: 202px;
    bottom: 35px;
}

.main_content {
    background-color: #FFF;
    padding-right: 20px;
    padding-left: 20px;
    float: left;
    width: 752px;
    padding-top: 40px;
    color: #000;
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: #A9B2B1;
    height: 100%;
    position: absolute;
    top: 3px;
    left: 202px;
    overflow-y: scroll;
}


.container {
    background-color: #FFF;
    width: 996px;
    min-height: 100%;
    height: 100%;
    position: fixed;
    top: 202px;
}


#footer {
    background-color: #772432;
    clear: both;
    height: 35px;
    margin: 0;
    color: #FFF;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 996px;
    position: fixed;
    bottom: 0;
}

HTML& PHP:

<body style="margin: 0; background-color: #A9B2B1;">
<div id="wrapper">
    <?php 
    $path = $_SERVER['toast'];
    $path .= "_includes/header.php";
    include_once($path);
    ?>
    <?php 
    $path = $_SERVER['toast'];
    $path .= "_includes/sidemenu.php";
    include_once($path);
    ?>   
</div>   

<div class="main_content">
    <p>Don't worry; there's no capital punishment during Toastmasters meetings. Unless, of course, the grammarian is in a bad mood.</p>
    <p>If you think of a club meeting as a project, then you can see the  general evaluator as a kind of project manager. As GE, your  responsibilities include:</p>
    <ul type="disc">
      <li>Ensuring the speech and leadership project evaluators know their responsibilities</li>
      <li>Supervising the timer, grammarian and Ah-Counter</li>
      <li>Evaluating everything that takes place during the club meeting </li>
      <li>Making sure each activity is performed correctly</li>
    </ul>
    <p>Several days before the meeting, contact the person who will be  Toastmaster of the meeting and confirm the meeting program. You should  also develop a checklist to follow during the meeting so you don't have  to keep all the details in your head. Some clubs have a prepared  checklist. If your club doesn't have one, ask the Toastmaster to help  you create your own checklist.</p>
    <p>When discussing the meeting program with the Toastmaster, ask what  evaluation format to use. Typically, an evaluator is assigned to an  individual, but sometimes evaluations are done by panels. The general  evaluator may set up any evaluation procedure he or she chooses, but it  should fit into the meeting program. Remember, too, that every  evaluation must be brief and complete. Review the <em>Effective Evaluation</em> manual for different evaluation formats.</p>
    <p>You'll also need to contact members serving as:</p>
    <ul>
      <li>Timer</li>
      <li>Grammarian</li>
      <li>Ah-Counter </li>
      <li>Individual evaluators</li>
    </ul>
    <p>Remind them of their assignments, and brief evaluators on their  responsibilities, the members they will evaluate and the evaluation  format to use. Make sure the evaluators understand that evaluation is a  positive, helping act that enables fellow Toastmasters to develop their  skills. Point out that an evaluation should enhance the speaker's  self-esteem and encourage evaluators to prepare thoroughly for their  role. Recommend that they call the member they've been assigned to  evaluate to discuss specific project objectives.</p>
    <p>Your final task <em>before</em> the meeting is to prepare a brief verbal explanation detailing:</p>
    <ul>
      <li>The purpose, techniques and benefits of evaluation so guests and new  members will better understand the function of evaluations. </li>
      <li>How evaluation is a positive experience designed to help people overcome flaws and reinforce good habits in their presentations.</li>
    </ul>
    <p>On meeting day:</p>
    <ul>
      <li>Arrive early. </li>
      <li>Make sure all evaluators are present and that they have the appropriate speaker or leader's manual. </li>
      <li>If an evaluator is absent, consult with the vice president education and arrange for a substitute. </li>
      <li>Ask each evaluator if he or she has any questions about the project  objectives to be evaluated, verify each speaker's time and notify the  timer if there are any changes. </li>
      <li>Take your seat near the back of the room. This will ensure you have a good view of the meeting and all its participants.</li>
    </ul>
    <p>The Toastmaster of the meeting usually introduces the general  evaluator before the Table Topics portion of the meeting. But your club  may have a different order for introductions, so check with the  Toastmaster or VPE before the meeting if you're not sure when you'll be  introduced.</p>
    <p>When you're introduced:</p>
    <ul type="disc">
      <li>Stand by your chair and deliver the explanation you prepared. </li>
      <li>Identify the grammarian, Ah-Counter and timer and have these members briefly state the purpose of their jobs. </li>
      <li>Request the word of the day, if your club has one, from the grammarian and then be seated.</li>
    </ul>
    <p>During the meeting, use your checklist and take notes on everything  that happens (or doesn't, but should). For example: Is the club's  property (e.g. trophies, banner, educational material) properly  displayed? Were there unnecessary distractions that could have been  avoided? Did the meeting, and each segment of it, begin and end on time?</p>
    <p>Study each participant on the program, from the person giving the  invocation or thought for the day to the last report by the timer. Look  for good and less than desirable examples of preparation, organization,  delivery, enthusiasm, observation and general performance of duties.  When it's time to begin the evaluation portion of the meeting, the  Toastmaster will introduce you, again. This time, you'll go to the  lectern and introduce each evaluator. After each recitation, thank the  evaluator for his or her efforts.</p>
    <p>Finally, give your general evaluation of the meeting:</p>
    <ul type="disc">
      <li>Use your checklist and the notes you took during the meeting. </li>
      <li>Phrase your evaluation so it is helpful, encouraging and motivates club members to implement the suggestions. </li>
      <li>You may wish to comment on the quality of evaluations. Were they  positive, upbeat, helpful? Did they point the way to improvement? </li>
      <li>When you've completed your evaluation, return control of the meeting to the Toastmaster.</li>
    </ul>
    <p>Being general evaluator is a big responsibility and it is integral to  the success of every single club member. People join Toastmasters  because they have a goal – they want to learn something. The club is  where they learn. If the learning environment isn't focused and fun,  members won't learn what they joined to learn. Your observations and  suggestions help ensure the club is meeting the goals and needs of each  member.</p>
    <p>And what do <em>you</em> get out of the deal? You get the chance to  practice and improve your skills in critical thinking, planning,  preparation and organization, time management, motivation and team  building!</p>
</div>
</div>
<!-- ends container-->


<?php 
   $path = $_SERVER['toast'];
   $path .= "_includes/footer.php";
   include_once($path);
?>
</div> <!-- ends wrapper-->
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

1 个答案:

答案 0 :(得分:2)

没有完全明白你的意思,但我已经解决了这个问题:

jsFiddle

它是一样的,我刚刚删除了以下CSS规则:

body {
    height: 300%;
}