Форуми

Да накарате div елемент да запълни останалото вертикално пространство? (css)

Флойд

Оригинален плакат
7 април 2005 г
Монтерей Мексико
  • 27 март 2006 г
Възможно ли е?
Имам два divs. Единият има фиксирана височина и искам другият да запълни оставащото вертикално пространство на прозореца. Ако задам височината на последния div на 100%, това ще го направи на същата височина като прозореца, но искам да е височината на прозореца минус височината на първия div.

Това е кодът, който използвам:
Код: |_+_|
Включих и някои изображения, които показват какво искам да правя и какво съм успял да правя досега. Благодаря предварително

Прикачени файлове

  • xa.gif xa.gif'file-meta'> 2,6 KB · Преглеждания: 10 076
  • xb.gif xb.gif'file-meta'> 3 KB · Преглеждания: 9950
н

NoNameBrand

17 ноември 2005 г


Халифакс, Канада
  • 27 март 2006 г
Защо не вложите 1-вото във второто?

В противен случай не мога да измисля начин да получите това, което искате.

Stevep

13 октомври 2004 г
Обединеното кралство
  • 27 март 2006 г
Мисля, че може да се окаже, че не казвате на втория слой откъде трябва да започне, така че предполага, че започва от върха, следователно припокривайки първия слой.
Опитвам:




Неозаглавен документ










да се






б


° С




д


И







ps Изневерих, като го направих в DW, добавих малко съдържание към втория слой и след това се забърквам с кода - DW обича нещата да имат малко подплънки около ръбовете и въпреки че можете да посочите в диалоговите прозорци кой искате слой да започнете от 0px от горния ъгъл, трябва да го кажете два пъти, като използвате изгледа на кода. Все пак трябваше.

Флойд

Оригинален плакат
7 април 2005 г
Монтерей Мексико
  • 27 март 2006 г
NoNameBrand каза: Защо не поставите 1-вото във второто?

В противен случай не мога да измисля начин да получите това, което искате.

Благодаря, това работи визуално, но вторият div ще бъде контейнер за това оформление, така че все още ми трябва да има правилните размери, за да може съдържанието му да ги наследи.

Така че може би просто не е възможно? Може би ще трябва да използвам малко javascript, за да работи?

Stevep каза: Опитайте:
Благодаря, но не можах да го накарам да работи, какъв браузър използвахте?

Флойд

Оригинален плакат
7 април 2005 г
Монтерей Мексико
  • 27 март 2006 г
Голямата схема на нещата

Добре, ето снимка на моята крайна цел. Досега го правех постепенно, така че може би проблемът е в първоначалния ми подход. И така, как бихте подходили към това (просто ми трябват идеи)? Бихте ли използвали чист css или бихте се поддали на таблици или рамки?

Прикачени файлове

  • grand_scheme.gif grand_scheme.gif'file-meta'> 40,2 KB · Преглеждания: 450

Stevep

13 октомври 2004 г
Обединеното кралство
  • 27 март 2006 г
Използвах Safari. Копирайте и поставете парчето код в текстов файл - уверете се, че има суфикс .html, когато го запазвате. След това просто плъзнете новия файл в отворен прозорец на браузъра. Току-що го тествах с Firefox и всичко е наред - поне мисля, че е това, което искате.
Малкото, с което трябва да си поиграете, е следното:
#Layer1 {
позиция: абсолютна;
вляво:0px;
отгоре:0px;
ширина:100%;
височина: 180px;
z-индекс: 1;
цвят на фона: #99CCFF;
}

Загрубете страницата си върху лист хартия, за да получите правилните позиции и това ще ви даде позицията на горния леви ъгъл на всеки слой. Височината на слой 1 ще определи началната позиция на слой 2 - в този случай слой 2 трябва да има aотгоре: 180px;ред код.
Ако искате 3-те слоя, както показвате в последната си публикация, тогава най-левият слой ще бъде:
#Layer1 {
позиция: абсолютна;
вляво:0px;
отгоре:0px;
ширина: 200px;
височина:100%;
z-индекс: 1;
цвят на фона: #336699;
}

и горният RH слой ще бъде:
#Layer1 {
позиция: абсолютна;
вляво: 200px;
отгоре:0px;
ширина:100%;
височина: 180px;
z-индекс: 2;
цвят на фона: #33CCFF;
}

и третият слой за запълване на останалата част от прозореца (както и да е преоразмерен) трябва да бъде нещо като:
#Layer1 {
позиция: абсолютна;
вляво: 200px;
отгоре: 180px;
ширина:100%;
височина:100%;
z-индекс: 3;
цвят на фона: #99CCFF;
}

Най-добре е да поставите някакво фиктивно съдържание във всеки слой, ако използвате Dreamweaver, в случай че слоят се свие до нищо при изглед на страница, следователно 'a, b, c и т.н.' в оригиналния html по-горе.

п.с. Не съм експерт, може и да греша, но се надявам да помогне. Това, което мога да кажа, е, че първият ми бит код изглежда работи. Аз лично не бих вложил слоеве, ако мога да помогна малко, но това съм само аз - правя само прости. н

NoNameBrand

17 ноември 2005 г
Халифакс, Канада
  • 27 март 2006 г
Какво е това 'слоеве'? това в стила на Dreamweaver за „брейк неща наистина е добро“?

Ето какво бих направил:
код:
foo   

ти вярваш!

14 юни 2003 г
MD / VA / DC
  • 27 март 2006 г
Деконцепция...

Разгледайте FlashObject и в изтеглянето има код за създаване на div на цял екран.. може би може да бъде приспособен както искате.

http://blog.deconcept.com/flashobject/

Флойд

Оригинален плакат
7 април 2005 г
Монтерей Мексико
  • 28 март 2006 г
Благодаря за цялата помощ, момчета, но току-що разбрах, че точното оформление, което искам, е невъзможно да се постигне с комбинация от фиксирани ширини/височини и проценти. Пренаписах го, използвайки само проценти и сега работи. Ако се интересувате от маркировката, уведомете ме и ще я публикувам.

Stevep

13 октомври 2004 г
Обединеното кралство
  • 28 март 2006 г
floyde каза: Ако се интересувате от маркирането, уведомете ме и ще го публикувам.
Бих искал да разгледам, ако имате време да публикувате отново.
NoNameBrand каза: Какво е това „слоеве“? това в стила на Dreamweaver за „брейк неща наистина е добро“?
Е, не знам за „разбиващите неща“, но предполагам, че сте предположили, че не съм CSS boff – слоевете са удобно име, дадено от DW на неща, които според мен трябва да се наричат ​​„CSS позиционирани елементи“ – и Мисля, че ги наричат ​​така, за да накарат хората като мен от DTP / Photoshop фон да се чувстват малко по-удобно. Като гледам кода, който сте включили в публикацията си NoNameBrand, той е много по-елегантен от моя - ще трябва да се опитам наистина да разбера главата си върху div тага. Благодаря за ОП и отговорите. н

NoNameBrand

17 ноември 2005 г
Халифакс, Канада
  • 28 март 2006 г
stevep каза: Е, аз не знам за „разбиващите неща“, но предполагам, че сте предположили, че не съм CSS boff – слоевете са удобно име, дадено от DW на неща, които според мен трябва да се наричат ​​„CSS позиционирани елементи '

Те също така имаха подредени z-индекси върху тях - които позиционират нещата отпред-назад на страница. Виждал съм слоеве на DW преди, които тотално разбиват сайт, но иначе не съм имал много излагане на тях (това беше достатъчно, наистина).

Ще трябва да се пробвам, за да си проумея надписа div.

A е просто произволен блок - не означава нищо семантично, както a

прави (абзац от текст). Ае същата идея, но за вградени неща (като a маркер, но отново, без семантично).

Най-лесното нещо, което трябва да направите, за да научите тези неща, е да спрете да използвате Dreamweaver. Проектирам сайтовете си във Photoshop и след това записвам графичните елементи, които искам, заедно с записване на цветови кодове и някои груби пикселни измервания за целите на подравняването, а след това кодирам сайта в TextWrangler или VIM.

Флойд

Оригинален плакат
7 април 2005 г
Монтерей Мексико
  • 28 март 2006 г
stevep каза: Бих искал да погледна, ако имате време да публикувате отново.
Ето го, има малко испански, надявам се, че не е твърде объркващо:

код:
Голяма схема html { височина: 100%; } тяло { марж: 0; допълване: 0; височина: 100%; ширина: 100%; } #left, #right { float: left; } #left { височина:100%; цвят на фона: оранжев; ширина: 10%; } #right { височина: 100%; позиция:относителна; ширина: 90%; } #top { фон-цвят: син; височина: 10%; } #fotos { позиция: относителна; височина: 90%; } #foto_sup_izq, #foto_sup_der, #foto_inf_izq, #foto_inf_der { височина: 50%; ширина: 50%; преливане: автоматично; позиция: абсолютна; } #foto_sup_izq, #foto_sup_der { отгоре: 0; } #foto_sup_der, #foto_inf_der { left: 50%; } #foto_inf_izq, #foto_inf_der { отгоре: 50%; } img/forums/80/making-div-element-fill-remaining-vertical-space-4.jpg 

Прикачени файлове

  • img/forums/80/making-div-element-fill-remaining-vertical-space-4.jpg'file-meta'> 36,3 KB · Преглеждания: 405