Automatyczne dzielenie wysokości z przepełnieniem i przewijanie w razie potrzeby

Próbuję utworzyć stronę internetową bez pionowego przewijania strony, ale potrzebuję, aby jeden z DIV był rozwijany pionowo na dole strony (najwyżej) i jeśli ma zawartość, która nie pasuje, div powinien utworzyć pionowy scroller.Automatyczne dzielenie wysokości z przepełnieniem i przewijanie w razie potrzeby

Mam już css dla wewnątrz elementu div znajdującego się w this fiddle, tworząc w razie potrzeby rolkę. również zorientowałem się, że pojemnik div rośnie tak, aby zajmował dokładnie taką pionową przestrzeń, jaką ma na stronie. po prostu nie mogę ich wymyślić razem!

należy pamiętać, że w jsfiddle nie będzie można przejrzeć zawartości całej witryny iw tym sensie to, co otrzymasz na drugie skrzypce, nie pokazuje, co zostało zrobione, ale działa tak jak ja zamierzone.

Kolejna uwaga: ponieważ są to różne skrzypce, id # kontenera div w pierwszym skrzypce jest id # dcontent div drugiego przykładu.

Jest jeszcze jedna rzecz: w przypadku typu zawartości ten element div będzie przewijany w pionie, ale w przypadku innego rodzaju treści powinien być przewijany w poziomie, ponieważ będzie miał produkt "suwak" wyświetlający elementy w poziomie w tym obszarze. DIV.

proszę spojrzeć również na to zdjęcie, bo to może być łatwiej zrozumieć, co próbuję powiedzieć: PICTURE

Próbowałem patrząc na inne pytania dotyczące tych tematów, ale żaden nie wydawał się obejmować wszystkie aspekty i "Próbuję rozwiązać ...: S

jeśli jest coś jeszcze, co mogę ci zapewnić, aby pomóc/mnie :) zastanawiasz się, proszę dać mi znać!

dziękuję!

Edit1: stałe literówki

EDIT2: dodany obraz o wyjaśnienie

Źródło

2012-04-14 Joum

Cóż, po długich badaniach, znalazłem obejście, że robi to, co trzeba: http://jsfiddle.net/CqB3d/25/

CSS:

body{ 
margin: 0; 
padding: 0; 
border: 0; 
overflow: hidden; 
height: 100%; 
max-height: 100%; 
} 

#caixa{ 
    width: 800px; 
    margin-left: auto; 
    margin-right: auto; 
} 
#framecontentTop, #framecontentBottom{ 
position: absolute; 
top: 0; 
width: 800px; 
height: 100px; /*Height of top frame div*/ 
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ 
background-color: navy; 
color: white; 
} 

#framecontentBottom{ 
top: auto; 
bottom: 0; 
height: 110px; /*Height of bottom frame div*/ 
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ 
background-color: navy; 
color: white; 
} 

#maincontent{ 
position: fixed; 
top: 100px; /*Set top value to HeightOfTopFrameDiv*/ 
margin-left:auto; 
    margin-right: auto; 
bottom: 110px; /*Set bottom value to HeightOfBottomFrameDiv*/ 
overflow: auto; 
background: #fff; 
    width: 800px; 
} 

.innertube{ 
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/ 
} 

* html body{ /*IE6 hack*/ 
padding: 130px 0 110px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/ 
} 

* html #maincontent{ /*IE6 hack*/ 
height: 100%; 
width: 800px; 
}

HTML:

<div id="framecontentBottom"> 
<div class="innertube"> 

<h3>Sample text here</h3> 

</div> 
</div> 


<div id="maincontent"> 
<div class="innertube"> 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque, ligula hendrerit euismod auctor, diam nunc sollicitudin nibh, id luctus eros nibh porta tellus. Phasellus sed suscipit dolor. Quisque at mi dolor, eu fermentum turpis. Nunc posuere venenatis est, in sagittis nulla consectetur eget... //much longer text... 
</div> 
</div> 
</div>

może jeszcze nie działać z poziomą rzeczą, ale jest to praca w toku!

Zasadniczo upuściłem model "incepcji" w pudełkach-wewnątrz-pudełka-w-pudełkach i użyłem ustalonego pozycjonowania z dynamicznymi właściwościami wysokości i przepełnienia.

Mam nadzieję, że pomoże to każdemu, kto znajdzie to pytanie później!

EDYCJA: To jest ostateczna odpowiedź.

Źródło

2012-04-15 16:55:54 Joum

Spróbuj tego:
CSS:

#content { 
    margin: 0 auto; 
    border: 1px solid red; 
    width:800px; 
    position:absolute; 
    bottom:0px; 
    top:0px; 
    overflow:auto 
}

HTML:

<body> 
<div id="content"> 
...content goes here... 
</div> 
<body>

Jeśli nie jak absolutne pozycjonowanie w tym przypadku, po prostu można grać wi th uczynienie z div tego rodzica i dziecka, zarówno z position:relative.

EDIT: Poniżej powinien działać (ja po prostu umieścić inline css na razie):

<div style="margin:0 auto; width:800px; height:100%; overflow:hidden"> 
<div style="border: 1px solid red; width:800px; position:absolute; bottom:0px; top:0px; overflow:auto"> 
...content goes here... 
</div> 
</div>

Źródło

2012-04-15 02:52:31 preahkumpii

to działa dobrze z * wewnątrz * elementu div z zawartością i zmienia rozmiar na ocuppy dostępnej przestrzeni pionowej, ale nie * rośnie * wewnątrz kontenera, ponieważ jest mi potrzebny ... btw, i Próbuję twojej edycji ... Rzecz w tym, że div rodzica w twoim drugim przykładzie kodu znajduje się wewnątrz innego kontenera w moim kodzie ... sprawdź obrazek powyżej, aby uzyskać bardziej przejrzysty opis ... więcej pomysłów? – Joum

yup ... nie działa: S tutaj jest skrzypce z wynikiem twojego testu: http://jsfiddle.net/CqB3d/ czerwony div div powinien pozostać przepełniony między czarnymi pasami i wyświetlić pionowy scroller. i jeśli przez przypadek rozdzielczość była inna, tylko element div z czerwoną ramką powinien * powiększyć *, aby zmienić rozmiar ... jestem tutaj całkowicie zagubiony: S nie wiem, czy to jest wysokość: ustawienie automatyczne, które powoduje, że zachowuje się w ten sposób lub jeśli ma coś wspólnego z treścią div ... – Joum

-5

Myślę, że to całkiem proste. po prostu użyć tej CSS

.content { 
    width: 100%; 
    height:(what u wanna give); 
    float: left; 
    position: fixed; 
    overflow: auto; 
    overflow-y: auto; 
    overflow-x: none; 
}

po to tylko dać tej klasy ur div tylko podoba -

<div class="content">your stuff goes in...</div>

Źródło

2012-05-02 11:22:07

-1

To co udało mi się zrobić do tej pory. Sądzę, że to jest coś, co próbujesz wyciągnąć. Jedyną rzeczą jest to, że wciąż nie mogę przypisać właściwej wysokości do kontenera DIV.

->JSFIDDLE

Źródło

2012-05-05 03:54:06

jsfiddle link nie znaleziono. Kod pocztowy powinien zawierać w odpowiedzi nie tylko linki –

Szybka odpowiedź z głównych punktów

dość dużo tę samą odpowiedź jak najlepiej wybraną odpowiedź od @Joum, aby przyspieszy swoje zadanie próbować uzyskać odpowiedź na wysłane Pytania i zaoszczędzić czas od rozszyfrowania, co się dzieje w składni -

odpowiedzi

Ustaw atrybut pozycji na stały, ustaw górny i dolny atrybut według swoich upodobań dla elementu lub elementu div, który ma mieć rozmiar "auto" w porównaniu do elementu nadrzędnego, a następnie ustaw przepełnienie na ukryty.

.YourClass && || #YourId{ 
    position:fixed; 
    top:10px; 
    bottom:10px; 
    width:100%; //Do not forget width 
    overflow-y:auto; 
}

Wallah! To wszystko, czego potrzebujesz do specjalnego elementu, który chcesz mieć dynamiczną wysokość w zależności od rozmiaru ekranu i dynamicznej zawartości przychodzącej, zachowując możliwość przewijania.

Źródło

2016-05-09 18:54:30 MattOlivos

Jest to rozwiązanie horyzontalne z wykorzystaniem FlexBox i bez brzydkiego pozycjonowania absolute.

body { 
 
    height: 100vh; 
 
    margin: 0; 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
#left, 
 
#right { 
 
    flex-grow: 1; 
 
} 
 

 
#left { 
 
    background-color: lightgrey; 
 
    flex-basis: 33%; 
 
    flex-shrink: 0; 
 
} 
 

 
#right { 
 
    background-color: aliceblue; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-basis: 66%; 
 
    overflow: scroll; /* other browsers */ 
 
    overflow: overlay; /* Chrome */ 
 
} 
 

 
.item { 
 
    width: 150px; 
 
    background-color: darkseagreen; 
 
    flex-shrink: 0; 
 
    margin-left: 10px; 
 
}

<html> 
 

 
<body> 
 
    <section id="left"></section> 
 
    <section id="right"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    </section> 
 
</body> 
 

 
</html>

Źródło

2017-07-31 08:27:53 TranslucentCloud

Jestem zaskoczony nikt nie wspomniał jeszcze calc().

Nie udało mi się odczytać Twojego konkretnego przypadku z twoich skrzypiec, ale rozumiem twój problem: chcesz mieć kontener height: 100%, który może nadal używać overflow-y: auto.

To nie działa po wyjęciu z pudełka, ponieważ overflow wymaga sztywnego ograniczenia rozmiaru, aby wiedzieć, kiedy należy rozpocząć obsługę przepełnienia. Tak więc, jeśli wybrałbyś numer height: 100px, działałby zgodnie z oczekiwaniami.

Dobra wiadomość to that calc() can help, ale nie jest tak prosta jak height: 100%.

calc() pozwala łączyć dowolne jednostki miary.

Tak, za sytuację opisujesz w obrazie dołączyć:

Ponieważ wszystkie elementy powyżej i poniżej różowy div są znanego wysokości (powiedzmy, 200px w wysokości całkowitej), można użyć calc określić wysokość ole małego palca:

height: calc(100vh - 200px);

lub "wysokość wynosi 100% z 200px widok wysokości minus.

Następnie, overflow-y: auto powinien działać jak urok.

Źródło

2017-08-18 22:08:29 Brandon

Automatyczne dzielenie wysokości z przepełnieniem i przewijanie w razie potrzeby

Odpowiedz

Powiązane problemy