textarea na całą powierzchnię dostępną powierzchnię, bez wcięć.

pytanie zadane 7 lutego 2016 w HTML i CSS przez jegor377 Stary wyjadacz (13,230 p.)

Witam,

Grzebie sobie ostatnio w framework7 i cordovie, i chciałem ustawić textarea na cały height i width diva, w którym się znajduje. Problem w tym, że height: 100% nie zadziała, bo długość tego diva jest chyba nie określona i coś mu nie pasuje. Macie pomysł jakby to zrobić?

1 odpowiedź

odpowiedź 7 lutego 2016 przez jpacanowski VIP (101,940 p.)

http://jsfiddle.net/A22SF/

Pokaż 8 poprzednich komentarzy

komentarz 8 lutego 2016 przez jegor377 Stary wyjadacz (13,230 p.)

<div class="page-content" id="code-window">
                            <div class="item-input">
                                <center>
                                    <textarea id="code"></textarea>
                                </center>
                            </div> 
                        </div>

page-content nie ma długości. Jest tylko szerokość., a item-input w sumie dodaje jedynie takie dwie linie nad i pod textareom. Textarea masz css.

komentarz 8 lutego 2016 przez jegor377 Stary wyjadacz (13,230 p.)

twój pomysł jest dobry, ale widocznie on myśli, że page-content ma rozmiar okna, a tam jest jeszcze ten navbar i coś jest nie halo... :/

komentarz 8 lutego 2016 przez jegor377 Stary wyjadacz (13,230 p.)

dobra. Problem rozwiązany.

body
{
    margin: 0 !important;
}

#code
{
    display: flex;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
	resize: none;
}

#code-wnd
{
    width: 99.5%;
    height: 99.5%;
}

@media (min-width: 768px)
{
    #code-wnd
    {
        margin-left: auto;
        margin-right: auto;
    }
}

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="theme-color" content="#2196f3">
        <title>My App</title>
        <link rel="stylesheet" href="css/framework7.material.min.css">
        <link rel="stylesheet" href="css/framework7.material.colors.min.css">
        <link rel="stylesheet" href="css/my-app.css">
    </head>
    <body>
        <div class="statusbar-overlay"></div>
        <div class="panel-overlay"></div>
        <div class="views">
            <div class="view view-main">
                <div class="pages navbar-fixed">
                    <div data-page="index" class="page">
                        <div class="navbar">
                            <div class="navbar-inner">
                                <div class="center">Awesome App</div>
                                <div class="right">
                                    <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
                                </div>
                            </div>
                        </div>
                        <div id="program-wnd" class="page-content">
                            <div id="code-wnd">
                                <textarea id="code"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/framework7.min.js"></script>
        <script type="text/javascript" src="js/my-app.js"></script>
    </body>
</html>