Div смещение вниз, несмотря на доступную комнату

Я готов кричать на моей странице, это похоже на настоящий бой. Я пытаюсь получить полный макет страницы для html-приложения. Я пытаюсь иметь два главных divs, бок о бок, что я могу скрыть с js. У меня также есть в каждом div 44px высокий заголовок. Моя проблема заключается в том, что я не могу заставить большой контент вливаться в первый div, даже с переполнением скрытого и такого. Я не могу опубликовать весь код, но я должен уметь размещать ссылки. Большая часть кода не имеет ничего общего с проблемой. Я сделал JSfiddle, чтобы упростить просмотр. Заранее спасибо. О, и несколько советов о получении моего голоса за ответ. Не пытайтесь изменить ширину столбцов, мне нужно, чтобы они были гибкими с ограничениями. Заранее спасибо!Div смещение вниз, несмотря на доступную комнату

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="style.css" rel="stylesheet"> 
    <title>Stack Overflow</title> 
</head> 
<body> 
    <div id="page-holder"> 
     <div id="main-menu" class ="menu-width"> 
      <div class="wide vert-center-right header large"> 
       <div> 
       <input id="search" type="text" class="search"/> 
       <img class="visible-phone" src="css/images/logo.png" /> 
       </div> 
      </div> 
      <div id="menu-body" class="menu-body"> 
       <button class="wide small vert-center-left">Push Me</button> 
      </div> 
     </div> 
     <div id="main-view" class="view-width"> 
      <div id="view-header" class="header view-header vert-align-left"> 
       <a href="#" class="visible-phone" onclick="resized()"><img class="plain" src="css/images/header-icon-back-18x18.png"/></a> 
       <img src="css/images/header-logo.png" /> 
      </div> 
      <div id="view-body" class="view-body"> 
       Large block of text that I want to not wrap into menu column. Large block of 
       text that I want to not wrap into menu column. Large block of text that I want 
       to not wrap into menu column. Large block of text that I want to not wrap into 
       menu column. Large block of text that I want to not wrap into menu column. 
       Large block of text that I want to not wrap into menu column. Large block 
       of text that I want to not wrap into menu column. Large block of text that 
       I want to not wrap into menu column. Large block of text that I want to not 
       wrap into menu column. Large block of text that I want to not wrap into menu 
       column. Large block of text that I want to not wrap into menu column. Large 
       block of text that I want to not wrap into menu column. Large block of text 
       that I want to not wrap into menu column. Large block of text that I want to 
       not wrap into menu column. Large block of text that I want to not wrap into 
       menu column. Large block of text that I want to not wrap into menu column. 
       Large block of text that I want to not wrap into menu column. 
      </div> 
     </div> 
     <div style="clear:both"></div> 
    </div> 
</body> 
</html>

источник

2013-03-07 rickstockham

Это потому, что вы только плавающие #main-menu и не #main-view. В этом случае содержимое #main-view обернется вокруг элемента #main-menu.

Если вы хотите остановить содержимое справа от текущей слева под левым меню, просто присвойте поплавок #main-view или используйте дополнение, эквивалентное ширине плюс правое поле #main-menu.

Для последнего решения:

$(document).ready(function() { 
    var offset_left = $("#main-menu").width() + parseInt($("#main-menu").css("marginRight")); /* Also added the calculated right margin (currently 0), just in case you decided you want more spacing between the menu and content */ 

    $("#main-view").css({ 
     "padding-left": offset_left 
    }); 
});

http://jsfiddle.net/teddyrised/gGt9S/3/

[Изменить]: Вы можете пересчитать все значения пикселов при изменении размера браузера, в свете вас, используя различные мин- и max-widths, а также для более гибкого макета. Для достижения этой цели, просто обернуть код, указанный выше в функции .resize():

$(document).ready(function() { 
    $(window).resize(function() { 
     // Calculate the necessary offset 
     var offset_left = $("#main-menu").width() + parseInt($("#main-menu").css("marginRight")); /* Also added the calculated right margin (currently 0), just in case you decided you want more spacing between the menu and content */ 

     // Assign left offset as padding 
     $("#main-view").css({ 
      "padding-left": offset_left 
     }); 
    }).resize(); 

    // Note: we fire resize() once when the window loads so that everything is calculated properly the first time the page loads (because by default, resize() is not triggered upon page load) 
});

http://jsfiddle.net/teddyrised/gGt9S/4/

Для полноты картины, вы можете захотеть взглянуть на, как debounce на .resize() событие - браузеры, такие как Chrome запускает событие, когда пользователь перетаскивает дескриптор изменения размера окна и может повлиять на производительность браузера на более медленных компьютерах, или если у вас слишком много вычислений в функции .resize().

источник

2013-03-07 18:33:18 Terry

Хм, я не смог повторить этот результат с плавающей точкой # основным ракурсом, по крайней мере, не в то есть, что я думаю, не лучший браузер для тестирования, за исключением того, что я надеюсь также использовать это для приложений Windows 8, которые я вполне уверен в использовании движка ie. Что касается отступов, из-за минимума, max и% для столбца меню, это не разрешено css, насколько я знаю. Не могли бы вы изменить мой jsfiddle, чтобы показать свое рабочее решение? – rickstockham

Вы по-прежнему можете использовать отступы, пытаясь исправить ширину - просто используйте 'box-sizing: border-box'. ;) Только что отредактировал мой ответ, проверьте новый Fiddle. – Terry

Я не уверен, что вы испортили размер представления, но это неправильное решение. Если бы я мог сделать это со столами, я был бы счастлив, но содержимое сошло с ума. Я знаю, что это сложная проблема, и для этого может потребоваться простое решение js. – rickstockham

Я не уверен, что это работает для вас, но установка высоты для вашего div поможет вам достичь того, чего вы хотите. Я установил min-height на определенное значение, а также установил height:auto, чтобы помочь, когда появится больше данных. Это позволяет избежать текста, протекающий в часть меню Это JSFiddle http://jsfiddle.net/gGt9S/2/

источник

2013-03-07 18:36:40 Ron

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

Div смещение вниз, несмотря на доступную комнату

ответ

Смежные вопросы