Podczas minimalizowaniu okna przegladarki element sie trzyma krawedzi i nie chowa

Question

Siema, mam ustawiony element position absolute ustawilem mu lefti top, fajnie przy zmniejszaniu width przegladarki(minimalizowaniu) trzyma sie lewej krawedzi caly czas(fajnie) ale jak zrobic ze gdy minimalizuje z góry lub dolu i dojde do tego elementu to by sie nie chowal tylko przesuwal sie tez w raz z krawedzia?

edit

Tak jak na zdjeciu chodzi o to zeby w takim wypadku ten element przesunal sie do gory tak by cale te pole formularza bylo widoczne a nie ze schowalo przy zminimalizowaniu od spodu przegladarki

 

https://codepen.io/anon/pen/boOxEN

 

Po prostu przy minimalizowaniu okna przegladarki by sie element przesuwal a nie chowal :D

Answer 1

Po pierwsze minimalizacja okna to zupełnie co innego, więc nie myl pojęć.

Proponuję ustawić okno na fixed, zamiast na absolute. Jeszcze kwestia "[top] + [height]", bo jeśli ta suma będzie większa od okna, to i tak wyjedzie poza okno. Wtedy warto jeszcze użyć max-height ( calc(100vh - [top]) ), żeby to treść się dopasowała.

Comments

Sorrki nie zauwazylem ze height nie nalozylem na tym :D ale to i tak nie o to chodzi, zmienilem na fixed a i tak po zmniejszeniu przegladarki np od dolu ten formularz nie podchodzi do gory

 

---

No tak, jak mniemam ustawiłeś go w określonej wysokości top (np. 50px), a sam ma wysokość (np. 400px). To razem daje 450px. Jeśli okno jest niższe to siłą rzeczy go utnie.

Nawet jak będzie top: 0; a wysokość 400px, to przy oknie 350px i tak go utnie. To trzeba rozwiązać inaczej (np. tak jak zaproponowałem z max-height w mojej odpowiedzi).

---

No i dlatego nie chce by ucielo a przemieszczalo to menu, jesli mowisz ze ten max-height moze pomoc, moglbys jakiegos example dac bo nie bardzo rozumiem jak takie cos zrobic??

---

<style>
body {
    padding: 1px;
}

.child {
    width: 200px;
    height: 100%;
    background: red;
}

.cut, .nocut {
    position: fixed;
    padding: 10px;
    background: green;
    top: 150px;
    height: 400px;
    box-sizing: border-box;
}

.cut {
    left: 50px;
}

.nocut {
    left: 300px;
    max-height: calc(100vh - 150px);
}
</style>
<div class="cut">
    <div class="child"></div>
</div>
<div class="nocut">
    <div class="child"></div>
</div>

Na przykład tak. Choć raczej proponuję zamiast top ustawiać na sztywno to zrobić rozwiązanie całkowicie elastyczne i pozycjonować w taki sposób:

.nocut {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100vw;
max-height: 100vh;
}

To zapewni ustawienie okna zawsze na środku... okna, a także zagwarantuje, że okno nigdy nie będzie większe od... okna.