zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Scrollen im body-Bereich unterdrücken

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.02.2015, 00:06
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.06.2007
Beiträge: 375
seeadler befindet sich auf einem aufstrebenden Ast
Standard Scrollen im body-Bereich unterdrücken

hi,

ich möchte gerne, dass im body-Bereich das Scrollen unterdrückt, aber dass Scrollen in der Hauptspalte (main) ermöglicht wird.

Mein CSS-Code:
PHP-Code:
body {
    
overflow:hidden;
}

body,
html {
    
height:100%;
    
margin:0;
    
padding:0;
    
min-height100vh;
}

body {
    
displayflex;
    
display: -webkit-box;
    
display: -webkit-flex;
    
display: -ms-flexbox;
    
flex-directioncolumn;
    -
webkit-box-orientvertical;
    -
webkit-box-directionnormal;
    -
webkit-flex-directioncolumn;
    -
ms-flex-directioncolumn;
}

#wrapper {
    
width:auto;
    
height:100%;
}

#container {
    
min-height:100%;
    
displayflex;
}

#main {
    
width:60%;
    
margin:8rem auto;
    
background-color:rgba(0,0,0,.85);

der html-code:
PHP-Code:
<body id="top" class="win firefox gecko fx36">

      
    <
div id="wrapper">

                    
      
              <
div id="container">

                      <
div id="main">
              <
div class="inside">
                
<
div class="mod_article first last block" id="home">

  
  
<
h1 class="ce_headline first">
  
Herzlich Willkommen</h1>

<
div class="ce_text last block">

  
  
      <
p>Lorem ipsum dolor sit ametconsetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam eratsed diam voluptuaAt vero eos et accusam et justo duo dolores et ea rebumStet clita kasd gubergrenno sea takimata sanctus est Lorem ipsum dolor sit ametLorem ipsum dolor sit ametconsetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam eratsed diam voluptua.</p>
<
p>Lorem ipsum dolor sit ametconsetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam eratsed diam voluptuaAt vero eos et accusam et justo duo dolores et ea rebumStet clita kasd gubergrenno sea takimata sanctus est Lorem ipsum dolor sit ametLorem ipsum dolor sit ametconsetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam eratsed diam voluptua.</p>
<
p>Lorem ipsum dolor sit ametconsetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam eratsed diam voluptuaAt vero eos et accusam et justo duo dolores et ea rebumStet clita kasd gubergrenno sea takimata sanctus est Lorem ipsum dolor sit ametLorem ipsum dolor sit ametconsetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam eratsed diam voluptua.</p>
<
p>Lorem ipsum dolor sit ametconsetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam eratsed diam voluptuaAt vero eos et accusam et justo duo dolores et ea rebumStet clita kasd gubergrenno sea takimata sanctus est Lorem ipsum dolor sit ametLorem ipsum dolor sit ametconsetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam eratsed diam voluptua.</p>
<
p>Lorem ipsum dolor sit ametconsetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam eratsed diam voluptuaAt vero eos et accusam et justo duo dolores et ea rebumStet clita kasd gubergrenno sea takimata sanctus est Lorem ipsum dolor sit ametLorem ipsum dolor sit ametconsetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam eratsed diam voluptua.</p>
<
p>&nbsp;</p>  
  
  

</
div>

  
</
div>
              </
div>
                          </
div>
          
                                    <
aside id="left">
                <
div class="inside">
                  
<!-- 
indexer::stop -->
<
nav class="mod_navigation block">

  
  <
a href="index.php/home.html#skipNavigation1" class="invisible">Navigation überspringen</a>

  
<
ul class="level_1" role="menubar">
            <
li class="active first"><span class="active first" role="menuitem">Home</span></li>
                <
li class="sibling"><a href="index.php/strength_and_conditioning.html" title="strength_and_conditioning" class="sibling" role="menuitem">Strength_and_Conditioning</a></li>
                <
li class="sibling"><a href="index.php/therapeutic_and_preventive.html" title="therapeutic_and_preventive" class="sibling" role="menuitem">Therapeutic_and_Preventive</a></li>
                <
li class="sibling"><a href="index.php/athletic.html" title="athletic" class="sibling" role="menuitem">Athletic</a></li>
                <
li class="sibling"><a href="index.php/resistance.html" title="resistance" class="sibling" role="menuitem">Resistance</a></li>
                <
li class="sibling"><a href="index.php/self_confidence.html" title="self_confidence" class="sibling" role="menuitem">Self confidence</a></li>
                <
li class="sibling"><a href="index.php/referenzen.html" title="Referenzen" class="sibling" role="menuitem">Referenzen</a></li>
                <
li class="sibling"><a href="index.php/impressum.html" title="Impressum" class="sibling" role="menuitem">Impressum</a></li>
                <
li class="sibling last"><a href="index.php/datenschutz.html" title="Datenschutz" class="sibling last" role="menuitem">Datenschutz</a></li>
      </
ul>

  <
a id="skipNavigation1" class="invisible">&nbsp;</a>

</
nav>
<!-- 
indexer::continue -->
                </
div>
              </
aside>
                      
                                
        </
div>
      
      
                        <
footer id="footer">
            <
div class="inside">
              
<
p>Und hier ist der Inhaltsbereich des footers</p>            </div>
          </
footer>
              
    </
div>

      
  
<
script>setTimeout(function(){var e=function(e,t){try{var n=new XMLHttpRequest}catch(r){return}n.open("GET",e,!0),n.onreadystatechange=function(){this.readyState==4&&this.status==200&&typeof t=="function"&&t(this.responseText)},n.send()},t="system/cron/cron.";e(t+"txt",function(n){parseInt(n||0)<Math.round(+(new Date)/1e3)-86400&&e(t+"php")})},5e3);</script>

</body>
</html> 
Wenn ich wie oben ein overflow: hidden für den body definiere wird es ganz klar abgeschnitten und ein overflow: scroll für den main Bereich bringt mir an dieser Stelle nichts.
Hat da jemand für mich einen Tipp wie ich nur bei übergroßem Inhalt das Scrollen ausschließlich für den main-Bereich ermöglichen kann?

Geändert von seeadler (28.02.2015 um 00:24 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.02.2015, 02:05
oov oov ist offline
Neuer Benutzer
neuer user
 
Registriert seit: 28.02.2015
Beiträge: 5
oov befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

Verpass dem body Element scroll="no"

und dem #main ein overflow: scroll;

oov

Geändert von oov (28.02.2015 um 16:58 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.03.2015, 23:42
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.06.2007
Beiträge: 375
seeadler befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Verpass dem body Element scroll="no"
Das funktioniert aber nur direkt im HTML und nicht als CSS-Anweisung.
Mit Zitat antworten
  #4 (permalink)  
Alt 07.03.2015, 11:13
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 887
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

Gib dem html-Element das overflow: hidden.
Mit Zitat antworten
  #5 (permalink)  
Alt 15.03.2015, 13:30
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.06.2007
Beiträge: 375
seeadler befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Gib dem html-Element das overflow: hidden.
Dabei wird auch der Inhalt im #main-Bereich abschnitten, obwohl ich für den #main-Bereich ein overflow:auto definiert habe.
Mit Zitat antworten
  #6 (permalink)  
Alt 15.03.2015, 19:28
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von seeadler Beitrag anzeigen
Dabei wird auch der Inhalt im #main-Bereich abschnitten, obwohl ich für den #main-Bereich ein overflow:auto definiert habe.
Ja schön und wie sieht es mit der Höhe aus hast du diese auch gesetzt, damit die Box scrollen sol bei zu viel Inhalt.

Siehe kleines Beispiel:
HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <title>Titel der Webseite</title> 
	<meta charset="UTF-8">

<style type="text/css">
* { margin: 0; padding: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block; 
}
html, body { height: 100%;  text-align: center; }
html { overflow: hidden; }

body {  
   font: 100.1% Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#wrapper { 
   background-color: fuchsia;
   min-height: 100%;
}
#container {
   padding-top: 5%; 
   padding-bottom: 54px; /* footerhöhe abstand */
}
#main {  
    background: orange; 
    margin: 0 auto; 
    max-height: 400px;
    height: 300px;
    max-width: 800px; 
    overflow: auto;
}
#main-inner {   
    background: #fff;
    padding: 1%;
    margin: 1%;
} 
#footer {
   background: lime;
   border-top-style: groove;
   color: #000;
   position: relative;
   margin: -3.375em auto 0 auto;
   line-height: 50px;
}
</style>

</head>
<body>

<div id="wrapper">

<div id="container">
<div id="main">
<div id="main-inner">
<h1>Herzlich Willkommen</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>  
</div>
</div>
</div>
     
</div>

<footer id="footer">             
<p>Und hier ist der Inhaltsbereich des footers</p>
</footer>

</body>
</html>
Vielleicht hilft es dir ja weiter.

Mit dem, was du zeigst, kann man nicht viel anfangen ziemlicher Caros.

_______________
MfG Roland
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Verweise im Body Bereich erstellen (HTML, Javascript) Punto1976 Javascript & Ajax 3 01.05.2010 15:08
Ungewöhnlicher abstand beim clearen von floats adrianno CSS 14 16.09.2009 15:20
Ausrichtung Aufzählungszeichen snowbound_ch CSS 11 19.02.2008 21:12
backgroundimage im body bereich in .php datei bastien Serveradministration und serverseitige Scripte 9 13.12.2006 11:11
overflow:scroll ... ohne feste größe zelle CSS 4 12.02.2006 20:21


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:09 Uhr.