гибкий, не растет до полной высоты

sborbaz

Привет. Я работаю над тем, что считаю самым сложным: макетами CSS. Я пытаюсь создать столбец полной высоты слева. Я пробовал это и не знаю, что здесь не так. Не могли бы вы дать мне подсказку, как продолжить разработку этого макета?

Ссылки Pastebin (поскольку копирование здесь разрушает вкладки):

HTML: http://pastebin.com/B68x8hNQ
CSS: http://pastebin.com/Yy2xb9ux

 


/* null margins and padding to give good cross-browser baseline */


html,body,address,blockquote,div,


form,fieldset,caption,


h1,h2,h3,h4,h5,h6,


hr,ul,li,ol,ul,dl,dt,dd,


table,tr,td,th,p,img,pre {


margin:0;


padding:0;


}


img, fieldset {


border:none;


}


hr {


display:none;


/*


HR in my code are for semantic breaks in topic/section, NOT


style/presenation, so hide them from screen.css users


*/


}


/* fix for legacy iOS and windows Mobile devices */


@media (max-width:512px) {


* {


-webkit-text-size-adjust:none;


-ms-text-size-adjust:none;


}


}


/* fix for HDX displays like the Kindle Fire HDX */


@media


(-webkit-min-device-pixel-ratio:2) and (min-width:1600px),


(min-resolution:172dpi) and (min-width:1600px)


{


html { font-size:200%; }


}


body {


display:-webkit-flexbox;


display:-ms-flexbox;


display:flex;


-webkit-flex-direction:column;


-ms-flex-direction:column;


flex-direction:column;


}


html,


body {


width:100%;


height:100%;


}


h3,


h2,


p {


padding-bottom:0.75em;


}


#top {


clear:both;


-webkit-flex:1 0 auto;


-ms-flex:1 0 auto;


flex:1 0 auto;


}


#contentWrapper {


float:left;


width:100;


flex:1 0 auto;


}


#content {


margin-left:20em;


}


#sidebar {


float:left;


width:19em;


background-color:#6bbdd6;


border-right:6px solid #007b9c;


}


#footer {


padding-top:0.5em;


border-top:1px solid #000;


}

Код (разметка): CSS:

  <!DOCTYPE html><html lang="screen.css" media="screen,projection,tv"><title> LAYOUT TEST </title></head><body><div id="top"><div id="contentWrapper"><div id="sidebar"><h2> Main menu </h2><ul id="mainMenu"><li> foo </li><li> bar </li><li> woo </li></ul><h2> Secondary menu </h2><ul><li> Source </li><li> Links </li></ul><!-- #sidebar --></div><div id="content"><h2> What is Lorem Ipsum? </h2><p> Lorem Ipsum is simply dummy text of the printing and typesetting industry.






Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.



It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.



It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.



</p><h3> Where does it come from? </h3><p> Contrary to popular belief, Lorem Ipsum is not simply random text.



It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.



Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.



Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.



The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. </p><p> The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.



Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.



Where can I get some? </p><hr><div id="footer"> &copy; Foobar Networks.



</div><!-- #content --></div><!-- #contentWrapper --></div><!-- #top --></div></body></html>

Код (разметка): PS: Я только что заметил, что пропустил h1 перед h2.

fedor2

Это потому, что до IE10 не существовало такого понятия, как flex-box. Концепт ДАЖЕ НЕ СУЩЕСТВУЛО еще. Вот почему, когда я использую display:Flex, я имею это в виду... мне очень важно, если он не работает в IE9/более ранних версиях, НУ ЧТО Ж!!! Я просто живу с этим, поскольку подобные незначительные визуальные эффекты не должны нарушать условия сделки, пока страница по-прежнему пригодна для использования пользователями.

Теоретически вы МОЖЕТЕ заставить это работать в IE10, добавив версии команд с префиксом -ms-, но реализация может быть немного непоследовательной по высоте по сравнению с другими браузерами.

Тем не менее, поскольку у #top нет родственного контейнера, как и у .contentWrapper, я не совсем понимаю, почему это для вас является препятствием, поскольку вам все равно нечего опускать вниз.

Обычно, если вы заботитесь о расширении гибкости, после них должно быть что-то вроде #footer, поэтому он сдвинут вниз - не уверен, учитывая то, что вы сделали, почему у вас вообще есть гибкость для этого.

если только вам не нужен столбец расширение, и в этом случае вы не будете их плавать, вы будете их сгибать. То, что ты сделал, не имеет особого смысла.

Хороший стиль кода, кажется знакомым.

На самом деле, учитывая то, что вы показали, и тот факт, что я попробовал это, я получил шесть разных макетов в шести разных браузерах, я понятия не имею, чего вы пытаетесь добиться с помощью макета.

Да, и вставка сюда не должна испортить ваши вкладки, но что-то ужасно НЕПРАВИЛЬНО с кодировкой символов и/или управляющими кодами, используемыми в вашем исходном коде.

Какой редактор вы используете? Что-то типа text-wrangler на крякинтоше или что-то в этом роде? Word Pad?

VelsoN

Я только что отключил «Редактор расширенного текста» в настройках, теперь стало намного лучше, и меня не беспокоят глупые кнопки.

Спасибо.

по моему мнению, это должно быть значением по умолчанию на этом форуме. Я сделал то, что вы говорите, и фактически боковая панель не толкает нижний колонтитул вниз.

Я это хорошо принимаю к сведению.

мне сложно полностью понять, как работает поток, но шаг за шагом я учусь.

Я слишком удивлен тем, как людям «проще» использовать такие вещи, как начальная загрузка; Прежде чем найти ваш сайт, я несколько раз безуспешно пытался использовать начальную загрузку и другие фреймворки, и это королевская PITA, а тот факт, что сайту нужен Javascript, чтобы выплевывать слова, - это бесполезно.

Я использую Noscript, и подобные сайты заставляют меня работать на них. Я продолжу читать старые посты и пробовать что-то новое.

Я не вижу смысла пытаться воспроизвести поведение сломанного макета, подобного этому. Ваша помощь очень ценна, большое вам спасибо.

SkazochNick

Привет, Добавьте display:flex к родительскому элементу (#contentWrapper) и задайте для дочерних столбцов ширину, которая может быть любой, какую вы захотите.

 
#contentWrapper {

display: flex;
}
#content {

width: 19em;
}
#sidebar {

width:19em;

background-color:#6bbdd6;

border-right:6px solid #007b9c;
}

Код (CSS): Надеюсь, это вам поможет.

neon_poison

Режимы гибкой разметки пока не полностью поддерживаются в IE. Я рекомендую вам прочитать это руководство, которое предлагает обратно совместимые альтернативы свойствам flexbox:
https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

Ярослав Терентьев

Большое спасибо! Я все еще обрабатываю всю важную информацию. Я использую vim с кодировкой utf8, в следующий раз попробую с другими настройками... Я думал, что с этим WYSIWYG какая-то проблема. Я пытаюсь исправить этот макет, сохранив тот же внешний вид, чтобы научиться: http://www.openbsd.org/

Я пробую еще раз, эта модификация вашего искусственного шаблона, похоже, работает (хотя мне все еще нужно протестировать в других браузерах):

Поместите h1 сразу после #content, переместите #sidebar ниже.
Установить #sidebar как абсолютный, вверху:0 слева:0
Установите #content с левым краем ширины боковой панели.

Это хороший подход?

volodika

У него есть одна большая проблема.

В тот момент, когда вы объявляете элемент фиксированным или абсолютным, он «удаляется из потока» — это означает, что он больше не сообщает свою ВЫСОТУ для целей прокрутки.

Это может вызвать серьезные головные боли, поэтому основные разделы контента НИКОГДА не должны быть APo.

(позиция: абсолютная). Вы хотите сделать что-то вроде нижнего колонтитула во всю ширину после этой боковой панели, он будет подниматься НАД содержимым этой боковой панели, если окно слишком короткое, поскольку оно не будет иметь никакого понятия, насколько оно высокое.

Это одна из причин, почему такие вещи, как выпадающие меню, когда они «огромны», на самом деле могут укусить вас за задницу.

(наряду с бедой, называемой «перегрузкой ссылок», это серьезная ошибка юзабилити.) APo и FPo (позиция: фиксированная) действительно необходимо использовать с помощью пипетки и зарезервировать для небольших элементов или размещения над/вокруг элементов, которые остаются в потоке.

Использование любого из них в основных разделах, содержащих текст, просто вызывает проблемы, поскольку ничто другое на странице не знает их размера в ЛЮБОМ измерении.

Уменьшите окно, сделав контент короче боковой панели, и попробуйте разместить нижний колонтитул ПОСЛЕ обоих столбцов, чтобы понять, что я имею в виду.

... и да, на этом сайте OpenBSD есть «проблемы»; например, даже если бы вы это исправили, для всей страницы не было бы очевидного родительского заголовка.

Обезьяна-резис с вытянутой шеей, как носок-труба, и головой, прислоненной к бетонной стене, могла бы стать лучшим местом. Шутя; напоминает мне одну из моих старых аватарок.

andrey-zabey1

Ох, да... ЕСЛИ вы пытались сделать то, что я думал, значит, у вас неправильное направление гибкости. Столбец означает создание ОДНОГО столбца, а не нескольких. Вам нужно flex-direction:row — значение по умолчанию. Я добавил их как .flex здесь:
http://www.cutcodedown.com/for_others/badger_/

Опять же, помните, что IE9/более ранние версии вообще не имеют ни малейшего представления о том, что такое flex, поэтому поддерживать их просто, вы идете по пути flex-box! Также будьте осторожны, чем больше «DIV» вы пытаетесь задействовать, тем больше вероятность того, что IE не сможет отобразить его.

Точно так же, если вы хотите «гибкий в гибком», ожидайте, что Chrome потеряет свою **** в такой же безумной манере, что может сделать такие вещи, как реализация максимальной ширины, фактически невозможной, смешивая два метода макетирования.

Nazimok

Эта гибкая штука плохо поддерживается в IE. Вы также можете использовать display:table для создания столбцов полной высоты. Если вам нужно ограничить высоту строки в таблице CSS, установите ее высоту равной 1 пиксель, чтобы она увеличивалась по мере необходимости, но не более, чем необходимо.

Похожие темы	Дата
Как преобразовать eot в ttf	19.10.2024, 18:10
панель навигации начальной загрузки не отображается на мобильных устройствах	19.10.2024, 18:10
В последнем сообщении не будет отображаться избранное изображение на сайте WordPress (показанное изображение включено).	19.10.2024, 18:10
Ведение блога — это легко или нет?	19.10.2024, 18:10
Циклическое переключение изображений разного размера при прокрутке	19.10.2024, 18:10
Структура URL-адреса	19.10.2024, 18:10
Нужна помощь с моим сайтом WordPress	19.10.2024, 18:10
Начинаем заниматься веб-дизайном и разработкой в 2017 году?	19.10.2024, 18:10
Выровнять 2 поля по вертикали с изображением между ними	19.10.2024, 18:10
Проблема CSS с формой	19.10.2024, 18:10

гибкий, не растет до полной высоты

sborbaz

fedor2

VelsoN

SkazochNick

neon_poison

Ярослав Терентьев

volodika

andrey-zabey1

Nazimok

I AM

Интересно