Динамическое изменение высоты div на основе содержимого

Question

Итак, я пытаюсь создать веб-сайт и открыть всплывающее окно DIV, которое появляется после нажатия кнопки. Это всплывающее окно DIV содержит текст/контент, назовем его «Местоположения» в соответствии с дизайном моего сайта. Эта папка Popup DIV имеет фиксированную высоту и ширину, и, следовательно, есть вертикальная полоса прокрутки, которую я создал для прокрутки вниз и чтения текста. Я хотел бы добавить больше контента для этого всплывающего окна, но, к сожалению, текст обрезается, а свиток не продолжает прокручиваться вниз. Я установил довольно большое значение для поля/дополнения в DIV, чтобы сделать эту работу очень длинной, но это очень неэффективное и плохое программирование.

Как установить стиль div на высоту общего HTML-документа (который является дианамом, меняя фактор здесь) с использованием JavaScript или CSS, чтобы я мог делать это разумно и правильно? Я не хочу, чтобы это делалось вручную, так как чем дольше будет HTML-документ, если я выберу, мне всегда придется вернуться и либо изменить значение margin/padding в CSS, либо сделать что-то для JavaScript.

Ниже CSS для этого:

/* Pop Up */ 
#popupAbout, #popupLocations, #popupContact, #popupBlog { 
    height: 600px; 
    width: 900px; 
    overflow: scroll; 
    background-color: rgba(0, 0, 0, 0.75); 
    border: 2px solid #cecece; 
    z-index: 15; 
    padding: 20px; 
    color: #FFF; 
    -webkit-box-shadow: 0px 0px 4px #000 inset; 
    -moz-box-shadow: 0px 0px 4px #000 inset; 
    box-shadow: 0px 0px 4px #000 inset; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    -o-border-radius: 10px; 
    -ms-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    border-radius: 10px; 
    margin-top: -50px; 
    visibility: hidden; 
} 

#popupAbout p, #popupLocations p, #popupContact p, #popupBlog p { 
    padding-left: 10px; 
    font-size: 18px; 
    line-height: 20px; 
} 
#popupAbout h1, #popupLocations h1, #popupContact h1, #popupBlog h1 { 
    text-align: left; 
    font-size: 30px; 
    letter-spacing: 1px; 
    border-bottom: 1px dotted #D3D3D3; 
    padding-bottom: 2px; 
    margin-bottom: 20px; 
} 
#popupAboutClose, #popupLocationsClose, #popupContactClose, #popupBlogClose { 
    right: 6px; 
    top: 6px; 
    position: absolute; 
    display: block; 
} 

И соответствующий JavaScript:

//Locations Page Pop Up 
      var popupLocationsStatus = 0; 

      function loadPopupLocations(){ 
       if(popupLocationsStatus==0){ 
        $("#popupLocations").fadeIn("slow"); 
        popupLocationsStatus = 1; 
       } 
      } 

      function disablePopupLocations(){ 
       if(popupLocationsStatus==1){ 
        $("#popupLocations").fadeOut("slow"); 
        popupLocationsStatus = 0; 
       } 
      } 

      function centerPopupLocations(){ 
       var windowWidth = document.documentElement.clientWidth; 
       var windowHeight = document.documentElement.clientHeight; 
       var popupLocationsHeight = $("#popupLocations").height(); 
       var popupLocationsWidth = $("#popupLocations").width(); 
       $("#popupLocations").css({ 
        "position": "absolute", 
        "top": windowHeight/2-popupLocationsHeight/2, 
        "left": windowWidth/2-popupLocationsWidth/2 
       }); 
      } 


      $(document).ready(function(){ 
       $("#popupLocations").fadeOut(); 
       popupLocationsStatus = 0; 
       $("#Locations").click(function(){ 
       $("#popupLocations").css({ 
        "visibility": "visible" }); 
        disablePopupAbout(); 
        disablePopupContact();     
        centerPopupLocations(); 
        loadPopupLocations(); 
       }); 
       $("#popupLocationsClose").click(function(){ 
        disablePopupLocations(); 
       }); 
      }); 
      $(function() 
      { 
       $('#popupLocations').jScrollPane(); 
       $('.popupLocations').jScrollPane(
        { 
         showArrows: true, 
         horizontalGutter: 10 
        } 
       ); 
      }); 

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

My Website Screenshot

Каждый может просмотреть мою работу до сих пор по адресу: www.zaheeruddinsyed.com, чтобы точно узнать, о чем я говорю.

Answer 1

Я считаю, что вы ищете overflow: auto. Взгляните на это fiddle.

Если вы хотите получить полосу прокрутки, как на образце, вам нужно будет поиграть с css, here - это учебник по применению пользовательского стиля для прокрутки.

Btw, если вы хотите создать всплывающее окно, вы можете посмотреть на Fancybox, который, на мой взгляд, выглядит действительно хорошо, и большая часть работы уже выполнена! Единственным недостатком может быть то, что вы должны использовать его с jQuery, но он уже используется на большинстве веб-страниц сегодня.

---

Редактировать

Когда я смотрел на исходный код страницы, я нашел проблему менее чем за минуту. Содержимое вашего всплывающего окна не прокручивается донизу, оно почему-то останавливается.

Этот вопрос похож: Bottom content cutoff using overflow: auto; and jscrollpane

Try и поместить этот код в консоли JavaScript (Ctrl + Сдвиг + (J в Chrome, K в Firefox):

$("#popupLocations .jspPane").css("top","-800px") 

Он прокручивается вниз, где он должен.Я знаю, что это еще не решило вашу проблему, но я думаю, что нашел решение (я не уверен, потому что сам не могу проверить). Но если вы посмотрите на этот другой вопрос, решение использует autoReinitialise:true. Вы можете попробовать это прямо сейчас, запустив это в консоли JavaScript:

$('.popupLocations').jScrollPane({ 
         showArrows: true, 
         horizontalGutter: 10, 
         autoReinitialise:true 
        } 
       ); 

Конечно, вы должны поместить его в файл, где вы инициализации JScrollPane, если вы хотите, чтобы правильно работать каждый раз, когда вы обновите стр.

И почему у вас есть 2 $(document).ready(function()...) и 2 $(function()... (что то же самое) определения в вашем файле? Вы должны поместить весь код в одну функцию, которая будет вызываться при загрузке DOM. И ради ваших пользователей UX, попытайтесь уменьшить изображения и файлы, также старайтесь избегать использования миллионов разных js-плагинов. Мне потребовалось почти 11 лет (в соответствии с сетевым профилировщиком) для загрузки в первый раз, и у меня есть 100Mb/s uplink, я не могу представить кого-то с мобильным Интернетом. На веб-странице более 100 запросов, многие из них - 1x1px. Если все это действительно необходимо, вы можете захотеть взглянуть на сжатие и комплектацию. Это зависит от того, какую базовую структуру вы будете использовать. Я могу сказать, что ASP.NET MVC 4 обеспечивает очень простой менеджер пакетов, но я уверен, что PHP или рельсы предоставляют что-то подобное.