Funzione per ridimensionare div in base alla risoluzione schermo..

otto9due

Utente Attivo
22 Feb 2014
590
25
28
Stavo pensando di ridimensionare il mio container ( a cui voglio mettere un overflow : scroll ) in base a questo calcolo..
Altezza divcontainer = Altezza Risoluzione - ( Altezza divmenu + Altezza divfooter )

Avevo pensato ad una cosa del genere.. Ma non funziona.. Sbaglio qualcosa??

HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	var top = ($(window).height() - ($( "#menu" ).height() + $( "#footer" ).height()));
	$( "#container" ).css( "height" : top );
});
</script>
<style>
#menu {
	background-color: red;
	width: 100%;
	height: 47px;
}
#container {
	background-color: green;
	width: 100%;
}
#footer {
	background-color: yellow;
	width: 100%;
	height: 60px;
}
</style>
</head>
<body>
<div id="menu"></div>
<div id="container"></div>
<div id="footer"></div>
</body>
</html>
 

otto9due

Utente Attivo
22 Feb 2014
590
25
28
Ho provato anche così ma nulla..
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	var top = ($(window).height() - ($( "#menu" ).height() - $( "#footer" ).height()));
	$( "#container" ).height(top);
});
</script>
<style>
#menu {
	background-color: red;
	width: 100%;
	height: 47px;
}
#container {
	background-color: green;
	width: 100%;
}
#footer {
	background-color: yellow;
	width: 100%;
	height: 60px;
}
</style>
</head>
<body>
<div id="menu"></div>
<div id="container"></div>
<div id="footer"></div>
</body>
</html>
 

MAeSI

Utente Attivo
13 Apr 2014
71
1
8
quellidelcucuzzolo.blogspot.it
Ciao, prova a dichiarare un DOCTYPE

Poi, nel primo esempio, in questa riga di codice, sostituisci i due punti con la virgola:

Codice:
$("#container").css("height", top);

Aggiungerei anche un reset.

Edit:

Nel secondo codice, qui c'è un refuso?

Codice:
($( "#menu" ).height() - $( "#footer" ).height())

O togli le parentesi o metti ancora il +
 
Ultima modifica:

otto9due

Utente Attivo
22 Feb 2014
590
25
28
Dai test

Ciao, prova a dichiarare un DOCTYPE

Poi, nel primo esempio, in questa riga di codice, sostituisci i due punti con la virgola:

Codice:
$("#container").css("height", top);

Aggiungerei anche un reset.

Edit:

Nel secondo codice, qui c'è un refuso?

Codice:
($( "#menu" ).height() - $( "#footer" ).height())

O togli le parentesi o metti ancora il +

Il Doctipe è dichiarato, non l'ho inserito qui ma c'è..
La virgola ansichê i : lo avevo già fatto, ma anche quello non ha prodotto risultati..
Per quanto riguarda quello che chiedevi nel terzo punto, in effetti il mio tentativo era quello di fare container = A-(B+C)
Cioè per determinare dinamicamente l'altezza di container vado a sottrarre ad A ammettiamo sia l'altezza totale della risoluzione alla somma (B+C) rispettivamente di le altezza del footer e del menù.
 
Ultima modifica:
Discussioni simili
Autore Titolo Forum Risposte Data
Lino80 [Retribuito] Cerco programmatore php per modifica/inserimento funzione/valori da un plugin importer wordpress Offerte e Richieste di Lavoro e/o Collaborazione 0
V [Visual Basic] Richiamare funzione su modulo per restituire list Visual Basic 0
C Creazione di una funzione per il filtraggio dei campi di un db Presentati al Forum 0
T [Javascript] funzione per attivare analytics... dov'è l'errore? Javascript 14
L [javascript]problema funzione per webapi Javascript 4
borgo italia una funzione per verificare l'invio di files Snippet PHP 0
A Funzione javascript per effettuare la slide del carosello in avanti Javascript 0
trattorino [PHP] funzione per visualizzare solo carattere PHP 2
N funzione autoplay video per browser mobili come ios e android Javascript 0
neo996sps Logica per funzione preventivi: sono sulla strada giusta? PHP 4
S Utilizzare la funzione postmessage per fare un redirect Javascript 0
L Funzione per API HTML5 Javascript 0
neo996sps [PHP e funzioni con PDO] Funzione per generare corpo tabella PHP 1
M [Datetimepicker]Richiamare funzione per più id uguali jQuery 4
G Funzione che resta in ascolto per una chiamata esterna Javascript 1
T [MYSQL] Richieste in Java per funzione Ajax MySQL 0
B Funzione per ottenere una determinata stringa PHP 4
ivarello Due Pulsanti con per lanciare funzione Javascript 0
L Funzione per verificare distanza di tempo non funziona: perchè? PHP 4
Z MailChimp: funzione per invio coupon personalizzati ed unici Email Marketing 2
T Funzione per redirect versione mobile: escludere i tablet Javascript 1
N [risolto] Funzione per calcolo età PHP 4
L funzione per nascondere username PHP 5
A funzione per popolare un drop down list Javascript 4
A Funzione unica per prendere e recuperare valori Javascript 0
P Funzione truncate per testo Javascript 3
E ordinamento array multidimensionale per un valore ottenuto tramite una funzione PHP 1
A Funzione per modificare foto PHP 2
P funzione per safari PHP 0
L Funzione per le News "leggi tutto" PHP 32
Sevenjeak Aiuto miglioramento funzione per inserimento BBCode in textarea Javascript 1
D Problema con funzione preg_match() per controllo email PHP 2
L Funzione per inserire solo testo PHP 13
H Funzione onmouseover per mostrare un box con un link da cliccare? Javascript 3
G Funzione per spedire email a destinatari diversi PHP 0
Monital Modificare una funzione per creazione tabella html PHP 15
L funzione per ruoli.. PHP 11
G funzione javascript per passaggio valori Javascript 1
emanuelevt funzione per entità html e classe PHP 1
asevenx problema con funzione per far apparire e scomparire un form di commenti PHP 1
M jQuery: funzione substr o substring per tagliare un testo? jQuery 1
M JavaScript: lanciare funzione ASP per salvare dati in database Javascript 0
J Funzione RICERCA per rubrica telefonica PHP 1
P SCript per la funzione condividi Ajax 1
T funzione cerca per il mio sito PHP 4
G Errore funzione per form PHP 2
O problemi con funzione per stampare tendina per data PHP 6
V [JQuery] Aiuto per funzione Ajax jQuery 0
P Funzione "http_build_query" per PHP4 PHP 0
G [javascript]Chiamare funzione javascript per menù Javascript 2

Discussioni simili