PROBLEMA Posizionamento box nella pagina

Pubblicità
C

C97QeKor4JGMpLpY

Utente Attivo
Messaggi
205
Reazioni
9
Punteggio
38
Ciao, avrei bisogno di fare un pagina come in figura,
image: https://i.imgur.com/tvwAPX4.png

tvwAPX4.png

è impostata con una barra superiore di 44px e il resto della pagina è un iframe, il mio problema è che vorrei fare in modo che la pagina non possa scorrere verso il basso, però non so come impostare il codice per dare un atezza del 100% - 44px al box inferiore (main nel codice), sotto il codice del file index.html
[
HTML: 
<html>

<head>
    <title>SERVER</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="index_css.css">
</head>


  <body>
    <nav class="nav">
      <label for="show-menu" class="show-menu">Show Menu</label>
      <input type="checkbox" id="show-menu" role="button">
      <ul id="menu">
        <li><a href="http://192.168.1.66:32400/web/" target="cont">Film</a></li>
        <li><a href="music.html" target="cont">Musica</a></li>
        <li><a href="Lychee/index.html" target="cont">Foto</a></li>
        <li><a href="http://192.168.1.67:9091" target="cont">Transmission</a></li>
        <li><a href="ping.php" target="cont">Status</a></li>
        <li><a href="conf.html" target="cont">Config</a></li>
      </ul>
    </nav>

    <main class="main">
        <iframe name="cont" style="height: 100%; width: 100%; border: none"></iframe>
    </main>

  </body>
</html>
 
iframe?? :shocked:
Siamo tornati agli anni 90 e nessuno mi ha detto nulla??
Fatti un favore e usa gli include e dei file php..

Per lo stile della pagina non si capisce bene cosa devi ottenere:
La pagina deve essere in totale 44px+X di altezza massima e non deve avere scrolling oppure il problema è lo scrolling dell'iframe??
 
cdtux ha detto:
iframe?? :shocked:
Siamo tornati agli anni 90 e nessuno mi ha detto nulla??
Fatti un favore e usa gli include e dei file php..

Per lo stile della pagina non si capisce bene cosa devi ottenere:
La pagina deve essere in totale 44px+X di altezza massima e non deve avere scrolling oppure il problema è lo scrolling dell'iframe??
Clicca per espandere...

La pagina non deve poter scorrere quindi deve avere un'altezza del 100%, da questo 100% devo togliere 44px che sono occupati dalla barra del menu e lasciare il resto all'iframe (ovviamete se il contenuto dell'iframe è maggiore di questo 100%-44px allora il contenuto potrà scorrere, ma non la pagina in se). Il mio problema è che mettendo un margine superiore di 44px ottengo che tutto il frame viene spostato di 44px verso il basso(vedi foto), con conseguente possiblità di scorrere la pagina.

Avevo trovato una soluzione che era semplicemente quella di togliere il <!DOCTYPE html> all'inizio così il frame si ridimensionava automaticamente e mi occupava tutta il resto della pagina, ma non mi sembrava la solzuoine accettabile in quanto non ne capivo il motivo.

Quindi inserendo il <!DOCTYPE html> non so come impostare l'altezza del frame in modo da adattarsi allo spazio che rimane nella pagina
Proverò anche adare un'occhiata ai file php ed agli include, ma il problema se presenta anche solo se volessi fare la stessa cosa con due div che hanno come sfondo due colori diversi e quindi è un problema più generale che non capisco come risolvere
upload_2017-9-11_17-53-48.webp
 
Prova così:

HTML: 
<html>
<head>
    <title>SERVER</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- CSS  -->
    <style type="text/css">
    html, body {
        margin: 0;
        padding: 0;
        border: 0;
        height:100vh;
    }
    .nav {
        height: 44px;
        background: #000000;
    }
    .main {
        width: 100%;
        height:calc(100vh - 44px);
        background-color: blue;
    }
    </style>
    <link rel="stylesheet" type="text/css" href="index_css.css">
</head>


  <body>
    <nav class="nav"></nav>

    <main class="main"></main>
  </body>
</html>

Schermata del 2017-09-11 18:43:21.webp
 
cdtux ha detto:
Prova così:

HTML: 
<html>
<head>
    <title>SERVER</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- CSS  -->
    <style type="text/css">
    html, body {
        margin: 0;
        padding: 0;
        border: 0;
        height:100vh;
    }
    .nav {
        height: 44px;
        background: #000000;
    }
    .main {
        width: 100%;
        height:calc(100vh - 44px);
        background-color: blue;
    }
    </style>
    <link rel="stylesheet" type="text/css" href="index_css.css">
</head>


  <body>
    <nav class="nav"></nav>

    <main class="main"></main>
  </body>
</html>

Visualizza allegato 261284
Clicca per espandere...

Funziona! Grazie, non conoscevo il vh quindi adesso vado a cercarmi esattamente cos'è e come funziona, per quanto riguarda l'include con il php ho cercato qualcosa ma ho deciso di non usarlo perchè nella pagina devo aprire link esterni e quindi, da quello che ho capito, potrei avere problemi visto che si integrano con la mia pagina e quindi con il mio css
 
Mursey ha detto:
Perdona la domanda, ma quale alternativa per un codice javascript senza librerie esterne e che possa aprire pagine su un altro dominio ?
Clicca per espandere...

Nel codice sopra non vedo nessun js.. ci sono solo delle pagine locali e la web interface di trasmission.

Il problema degli iframe è che non puoi modificare ne lo stile del suo contenuto ne il suo contenuto (se ciò che embeddi nella pagina non è un sito tuo ovviamente), il che può essere un grosso problema sia per la sicurezza sia per lo styling (coerenza di stili), senza considerare la parte seo..
Considera poi che se il proprietario del sito esterno decide di eliminare il contenuto o se questo non è raggiungibile per qualsi voglia motivo, ti ritrovi con una pagina monca.
Se invece la tua domanda non era riferita al codice sopra, personalmente preferirei un semplice redirect al contenuto esterno oppure estrarre il contenuto della pagina esterna (via api, se ci sono, o con un web scraper) per poi gestirne lo stile nella tua pagina. In questo caso però le cose si complicano un pelino..

PS. Se non ho bene inteso la domanda fammi un esempio concreto così ne parliamo meglio..
 
cdtux ha detto:
Se invece la tua domanda non era riferita al codice sopra, personalmente preferirei un semplice redirect al contenuto esterno oppure estrarre il contenuto della pagina esterna (via api, se ci sono, o con un web scraper) per poi gestirne lo stile nella tua pagina. In questo caso però le cose si complicano un pelino..
Clicca per espandere...
Si, non era riferita a questo caso.

Ti ho chiesto questo perchè sul lavoro usiamo iFrame per integrare pagine terze di domini diversi.
Le pagine vanno mostrate integralmente.

Volevo solo sapere se c'erano tecnologie migliori e più attuali. :)
 
Mursey ha detto:
Si, non era riferita a questo caso.

Ti ho chiesto questo perchè sul lavoro usiamo iFrame per integrare pagine terze di domini diversi.
Le pagine vanno mostrate integralmente.

Volevo solo sapere se c'erano tecnologie migliori e più attuali. :)
Clicca per espandere...

Non sono molto informato dato che non è cosa comune (per me..) embeddare contenuti che non siano video..

Comunque ho trovato questa discussione che potrebbe darvi spunti interessanti tipo:
HTML: 
<!-- Resources on other origins must be CORS-enabled. -->
<link rel="import" href="http://example.com/elements.html">
 
Pubblicità
Pubblicità
Indietro
Top