2016-02-14 3 views
1

Я пробовал исправить это сам на какое-то время, это кажется легкой проблемой, но я потерян.Устранение неполадок div от сбрасывания при изменении размера окна

У меня есть два divs один с поплавком слева, один с поплавком вправо. У правого края слева - 40 пикселей, а ширина должна корректироваться по мере уменьшения окна. В тот момент, когда два дельта касаются, он падает.

Пожалуйста, проверьте это для более глубокого понимания :) https://jsfiddle.net/to7g54sn/1/

#contentwrapper { 
width: 100%; 
max-width: 1160px; 
float: right; 
margin-top: 154px; 
margin-left: 40px; 
} 

#navigation { 
width: 150px; 
margin-left: -120px; 
float: left; 
} 

(Предварительный просмотр нуждается в ширину 1330px, чтобы увидеть дивы, прежде чем они падают).

Поля слева: 40px в правом div необходимо постоянно применять, если вы прокрутите вниз по уменьшенному размеру окна, вы увидите перекрытие левого div. Я думаю, что javascript делает эту проблему жесткой, но я не совсем уверен.

+1

Я думаю, что вы ищете является расположением 2-цв, где один столбец с фиксированной шириной и другая жидкость, не так ли? Если это так, ознакомьтесь с этой простой демонстрацией, используя отрицательные поля. Http://codepen.io/tedw/pen/azqMRL?editors=1100 Вы также можете использовать 'display: table-cell;' или 'display: flex;' для этого , –

+0

Используйте reltive div widths http://stackoverflow.com/questions/21136975/fixed-menu-on-left-and-content-scrollable – Keloo

+0

@TedWhitehead ... Спасибо за помощь. Я попытался включить то, что вы написали в моем jsfiddle, но я не смог добиться того, чего хотел. Может это из-за моего javascript? Или, возможно, потому, что я пытаюсь понять, что вы имеете в виду. Любой шанс, что вы могли бы быстро взглянуть на мой jsfiddle? Или напишите мне на какую-то информацию, объясняющую ваше решение. :) – ccc

ответ

1

У меня есть простое решение. Просто используйте этот CSS ниже:

#contentwrapper { 
    width: calc(100% - 70px); 
} 

Проверить это на jsfiddle

+0

Большое спасибо. Не могли бы вы объяснить, как это работает, чтобы я мог учиться? – ccc

+1

Это как динамический css. Это приведет к тому, что его полная ширина на 70 пикселей меньше. –

+0

Звучит достаточно просто. Хорошо спасибо за помощь. – ccc

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