Как сделать полосы прокрутки, когда DIV не хватает места, но держите DIV в центре?

Я хочу создать центрированную форму.

HTML:

<div id="profileContainer">…</div>

CSS

#profileContainer {
  border-radius: 25px;
  background: #ffffff;
  padding: 10px;
  width: 100%;
  max-width: 760px;
  display: inline-block;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Проблема заключается в том, что экран по вертикали короче, часть формы скрыта, и никакие полосы прокрутки не отображаются, чтобы сделать их доступными: JSFiddle.

Вопрос:

Как заставить полосы прокрутки появляться, когда одного только вертикального пространства недостаточно, но держите div в центре по горизонтали и вертикали, когда есть достаточно места?

Ответ 1

Это можно легко достичь с помощью flexbox, просто удалив все позиционирование из #profileContainer и добавив следующие правила в body:

display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;

Первые три правила будут центрировать #profileContainer, в то время как последний будет уверен, что тело всегда будет по крайней мере на всю высоту представления.

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

В качестве дополнительной заметки у вас есть дополнительный закрывающий тег div перед тем, как закрыть основной.

Ответ 2

Я бы изменил правило CSS для #profileContainer следующим образом:

#profileContainer {
    border-radius: 25px;
    background: #ffffff;
    padding: 10px;
    width: 90%;
    max-width: 760px;
    display: block;
    position: relative;
    margin: 30px auto 0;
}

position: relative вместо fixed, меньше width, так как 100% плюс заполнение превышает ширину контейнера. margin: 0 auto, чтобы центрировать горизонтально, а не left: 50% и transformX(-50%). Исправлено margin top вместо вертикального центрирования, чтобы избежать описанного эффекта.

Fiddle: http://jsfiddle.net/qacv17gq/1/

Дополнение: кроме javascript/jQuery вы не сможете центрировать контейнер вертикально и не иметь скрытых частей, без полосы прокрутки, когда высота окна/экрана меньше высоты контейнера.

Ответ 3

Это 2016, все! Время для начала полагаться на CSS Flexbox, чтобы центрировать наши элементы и уйти в отставку с любимым translate(-50%, -50%) hack.

CodePen

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#profileContainer {
    width: 760px;
    max-width: 100vw;
    max-height: 100vh;
    overflow-y: scroll;
}

<body> служит нашим гибким контейнером. justify-content: center и align-items: center будут центрировать форму. max-width и max-height сохранят форму, превышающую границы окна.

Нет position требуется!

Ответ 4

Я думаю, что это тот ответ, который вы ищете... Просто просмотрите этот код Если у вас есть запрос, спросите меня

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>   
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
   <div id="profileContainer" class="container-fulid">
   <div class="col-md-8 col-xs-8 col-xs-offset-2 col-md-offset-2" style="border:1px solid #000;padding:0px;border-radius:4px">
    <header>
      <nav class="navbar navbar-inverse" style="">
  <div class="navContainer">
    <div id="navbar">
        <div id="leftNavSection">
        </div>
        <div id="rightNavSection" style="color:#fff">
		Logged in as Dave A 
		
		<a rel="nofollow" data-method="delete" href="/logout">Log Out</a>
	</div>
    </div>
  </div>
</nav>


    </header>
    <main role="main" class="container-fulid">

<!-- User profile --> 
<div id="profile" >
<div class="col-lg-12">
<div class="col-md-8 col-md-offset-2">

    <h2>Profile Information</h2>
    <form class="edit_user" id="edit_user_38" action="/users/38" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="wh3mbAtBBAMrOqPUdqGMY5aHns3EZ/tVQDRHhcA1A2ZqXKgDE+VKG7Gj/NyjySKngvorjjq8rVMc/n8LOE4Pgg==" />

      <div class="profileField">
      	<label for="user_first_name">First name</label><br/>
      	<div class="field"><input size="20" class="textField form-control" type="text" value="Dave" name="user[first_name]" id="user_first_name" style="width:50%"/></div>
      </div>

      <div class="profileField">
      	<label for="user_last_name">Last name</label><br/>
      	<div class="field"><input size="20" class="textField form-control" type="text" value="A" name="user[last_name]" id="user_last_name" style="width:50%"/></div>
      </div>

      <div class="profileField">
      	Birthday<br/>
		<div class="col-lg-4">
      	<select id="user_dob_2i" name="user[dob(2i)]" class="form-control">
		
<option value="">Select Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<div class="col-lg-4">
<select id="user_dob_3i" name="user[dob(3i)]" class="form-control">
<option value="">Select Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="col-lg-4">
<select id="user_dob_1i" name="user[dob(1i)]" class="form-control">
<option value="">Select Year</option>
<option value="1900">1900</option>
<option value="1901">1901</option>
<option value="1902">1902</option>
<option value="1903">1903</option>
<option value="1904">1904</option>
<option value="1905">1905</option>
<option value="1906">1906</option>
<option value="1907">1907</option>
<option value="1908">1908</option>
<option value="1909">1909</option>
<option value="1910">1910</option>
<option value="1911">1911</option>
<option value="1912">1912</option>
<option value="1913">1913</option>
<option value="1914">1914</option>
<option value="1915">1915</option>
<option value="1916">1916</option>
<option value="1917">1917</option>
<option value="1918">1918</option>
<option value="1919">1919</option>
<option value="1920">1920</option>
<option value="1921">1921</option>
<option value="1922">1922</option>
<option value="1923">1923</option>
<option value="1924">1924</option>
<option value="1925">1925</option>
<option value="1926">1926</option>
<option value="1927">1927</option>
<option value="1928">1928</option>
<option value="1929">1929</option>
<option value="1930">1930</option>
<option value="1931">1931</option>
<option value="1932">1932</option>
<option value="1933">1933</option>
<option value="1934">1934</option>
<option value="1935">1935</option>
<option value="1936">1936</option>
<option value="1937">1937</option>
<option value="1938">1938</option>
<option value="1939">1939</option>
<option value="1940">1940</option>
<option value="1941">1941</option>
<option value="1942">1942</option>
<option value="1943">1943</option>
<option value="1944">1944</option>
<option value="1945">1945</option>
<option value="1946">1946</option>
<option value="1947">1947</option>
<option value="1948">1948</option>
<option value="1949">1949</option>
<option value="1950">1950</option>
<option value="1951">1951</option>
<option value="1952">1952</option>
<option value="1953">1953</option>
<option value="1954">1954</option>
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
</select>
</div>

      </div>

      <div class="profileField address">
      	
      	<label for="user_address_attributes_address">Home Town</label><br/>
		<div class="col-lg-4">
      	<div class="field"><input placeholder="City" class="textField form-control" type="text" name="user[address_attributes][city]" id="user_address_attributes_city" /></div>
		</div>
		<div class="col-lg-4">
      	<select class="selectField selectMenu form-control" name="user[address_attributes][state_id]" id="user_address_attributes_state_id"><option value="">Select State</option>

<option value="3526">Alabama</option>
<option value="3556">Alaska</option>
<option value="3547">Arizona</option>
<option value="3510">Arkansas</option>
<option value="3542">California</option>
<option value="3543">Colorado</option>
<option value="3527">Connecticut</option>
<option value="3512">Delaware</option>
<option value="3513">Florida</option>
<option value="3514">Georgia</option>
<option value="3555">Hawaii</option>
<option value="3548">Idaho</option>
<option value="3529">Illinois</option>
<option value="3530">Indiana</option>
<option value="3528">Iowa</option>
<option value="3515">Kansas</option>
<option value="3557">Kentucky</option>
<option value="3516">Louisiana</option>
<option value="3531">Maine</option>
<option value="3517">Maryland</option>
<option value="3558">Massachusetts</option>
<option value="3532">Michigan</option>
<option value="3533">Minnesota</option>
<option value="3519">Mississippi</option>
<option value="3518">Missouri</option>
<option value="3549">Montana</option>
<option value="3534">Nebraska</option>
<option value="3545">Nevada</option>
<option value="3535">New Hampshire</option>
<option value="3536">New Jersey</option>
<option value="3544">New Mexico</option>
<option value="3537">New York</option>
<option value="3520">North Carolina</option>
<option value="3550">North Dakota</option>
<option value="3538">Ohio</option>
<option value="3521">Oklahoma</option>
<option value="3551">Oregon</option>
<option value="3559">Pennsylvania</option>
<option value="3539">Rhode Island</option>
<option value="3522">South Carolina</option>
<option value="3552">South Dakota</option>
<option value="3523">Tennessee</option>
<option value="3524">Texas</option>
<option value="3546">Utah</option>
<option value="3540">Vermont</option>
<option value="3560">Virginia</option>
<option value="3553">Washington</option>
<option value="3511">Washington, D.C.</option>
<option value="3525">West Virginia</option>
<option value="3541">Wisconsin</option>
<option value="3554">Wyoming</option></select>
</div>
<div class="col-lg-4">
        <select id='user[address]_country_id' name='user[address][country_id]' class="form-control">
<option value="0">-- Select --</option><option value="38">Canada</option><option value="233" selected>United States</option><option value="0" disabled="disabled">----------------------------</option><option value="3">Afghanistan</option>
<option value="15">Aland Islands</option>
<option value="6">Albania</option>
<option value="62">Algeria</option>
<option value="11">American Samoa</option>
<option value="1">Andorra</option>
<option value="8">Angola</option>
<option value="5">Anguilla</option>
<option value="9">Antarctica</option>
<option value="4">Antigua and Barbuda</option>
<option value="10">Argentina</option>
<option value="7">Armenia</option>
<option value="14">Aruba</option>
<option value="13">Australia</option>
<option value="12">Austria</option>
<option value="16">Azerbaijan</option>
<option value="32">Bahamas</option>
<option value="23">Bahrain</option>
<option value="19">Bangladesh</option>
<option value="18">Barbados</option>
<option value="36">Belarus</option>
<option value="20">Belgium</option>
<option value="37">Belize</option>
<option value="25">Benin</option>
<option value="27">Bermuda</option>
<option value="33">Bhutan</option>
<option value="29">Bolivia</option>
<option value="30">Bonaire, Saint Eustatius and Saba </option>
<option value="17">Bosnia and Herzegovina</option>
<option value="35">Botswana</option>
<option value="34">Bouvet Island</option>
<option value="31">Brazil</option>
<option value="106">British Indian Ocean Territory</option>
<option value="239">British Virgin Islands</option>
<option value="28">Brunei</option>
<option value="22">Bulgaria</option>
<option value="21">Burkina Faso</option>
<option value="24">Burundi</option>
<option value="117">Cambodia</option>
<option value="47">Cameroon</option>
<option value="38">Canada</option>
<option value="52">Cape Verde</option>
<option value="125">Cayman Islands</option>
<option value="41">Central African Republic</option>
<option value="215">Chad</option>
<option value="46">Chile</option>
<option value="48">China</option>
<option value="54">Christmas Island</option>
<option value="39">Cocos Islands</option>
<option value="49">Colombia</option>
<option value="119">Comoros</option>
<option value="45">Cook Islands</option>
<option value="50">Costa Rica</option>
<option value="98">Croatia</option>
<option value="51">Cuba</option>
<option value="53">Curacao</option>
<option value="55">Cyprus</option>
<option value="56">Czech Republic</option>
<option value="40">Democratic Republic of the Congo</option>
<option value="59">Denmark</option>
<option value="58">Djibouti</option>
<option value="60">Dominica</option>
<option value="61">Dominican Republic</option>
<option value="221">East Timor</option>
<option value="63">Ecuador</option>
<option value="65">Egypt</option>
<option value="210">El Salvador</option>
<option value="88">Equatorial Guinea</option>
<option value="67">Eritrea</option>
<option value="64">Estonia</option>
<option value="69">Ethiopia</option>
<option value="72">Falkland Islands</option>
<option value="74">Faroe Islands</option>
<option value="71">Fiji</option>
<option value="70">Finland</option>
<option value="75">France</option>
<option value="80">French Guiana</option>
<option value="176">French Polynesia</option>
<option value="216">French Southern Territories</option>
<option value="76">Gabon</option>
<option value="85">Gambia</option>
<option value="79">Georgia</option>
<option value="57">Germany</option>
<option value="82">Ghana</option>
<option value="83">Gibraltar</option>
<option value="89">Greece</option>
<option value="84">Greenland</option>
<option value="78">Grenada</option>
<option value="87">Guadeloupe</option>
<option value="92">Guam</option>
<option value="91">Guatemala</option>
<option value="81">Guernsey</option>
<option value="86">Guinea</option>
<option value="93">Guinea-Bissau</option>
<option value="94">Guyana</option>
<option value="99">Haiti</option>
<option value="96">Heard Island and McDonald Islands</option>
<option value="97">Honduras</option>
<option value="95">Hong Kong</option>
<option value="100">Hungary</option>
<option value="109">Iceland</option>
<option value="105">India</option>
<option value="101">Indonesia</option>
<option value="108">Iran</option>
<option value="107">Iraq</option>
<option value="102">Ireland</option>
<option value="104">Isle of Man</option>
<option value="103">Israel</option>
<option value="110">Italy</option>
<option value="44">Ivory Coast</option>
<option value="112">Jamaica</option>
<option value="114">Japan</option>
<option value="111">Jersey</option>
<option value="113">Jordan</option>
<option value="126">Kazakhstan</option>
<option value="115">Kenya</option>
<option value="118">Kiribati</option>
<option value="123">Kosovo</option>
<option value="124">Kuwait</option>
<option value="116">Kyrgyzstan</option>
<option value="127">Laos</option>
<option value="136">Latvia</option>
<option value="128">Lebanon</option>
<option value="133">Lesotho</option>
<option value="132">Liberia</option>
<option value="137">Libya</option>
<option value="130">Liechtenstein</option>
<option value="134">Lithuania</option>
<option value="135">Luxembourg</option>
<option value="149">Macao</option>
<option value="145">Macedonia</option>
<option value="143">Madagascar</option>
<option value="157">Malawi</option>
<option value="159">Malaysia</option>
<option value="156">Maldives</option>
<option value="146">Mali</option>
<option value="154">Malta</option>
<option value="144">Marshall Islands</option>
<option value="151">Martinique</option>
<option value="152">Mauritania</option>
<option value="155">Mauritius</option>
<option value="246">Mayotte</option>
<option value="158">Mexico</option>
<option value="73">Micronesia</option>
<option value="140">Moldova</option>
<option value="139">Monaco</option>
<option value="148">Mongolia</option>
<option value="141">Montenegro</option>
<option value="153">Montserrat</option>
<option value="138">Morocco</option>
<option value="160">Mozambique</option>
<option value="147">Myanmar</option>
<option value="161">Namibia</option>
<option value="170">Nauru</option>
<option value="169">Nepal</option>
<option value="167">Netherlands</option>
<option value="251">Netherlands Antilles</option>
<option value="162">New Caledonia</option>
<option value="172">New Zealand</option>
<option value="166">Nicaragua</option>
<option value="163">Niger</option>
<option value="165">Nigeria</option>
<option value="171">Niue</option>
<option value="164">Norfolk Island</option>
<option value="121">North Korea</option>
<option value="150">Northern Mariana Islands</option>
<option value="168">Norway</option>
<option value="173">Oman</option>
<option value="179">Pakistan</option>
<option value="186">Palau</option>
<option value="184">Palestinian Territory</option>
<option value="174">Panama</option>
<option value="177">Papua New Guinea</option>
<option value="187">Paraguay</option>
<option value="175">Peru</option>
<option value="178">Philippines</option>
<option value="182">Pitcairn</option>
<option value="180">Poland</option>
<option value="185">Portugal</option>
<option value="183">Puerto Rico</option>
<option value="188">Qatar</option>
<option value="42">Republic of the Congo</option>
<option value="189">Reunion</option>
<option value="190">Romania</option>
<option value="192">Russia</option>
<option value="193">Rwanda</option>
<option value="26">Saint Barthelemy</option>
<option value="200">Saint Helena</option>
<option value="120">Saint Kitts and Nevis</option>
<option value="129">Saint Lucia</option>
<option value="142">Saint Martin</option>
<option value="181">Saint Pierre and Miquelon</option>
<option value="237">Saint Vincent and the Grenadines</option>
<option value="244">Samoa</option>
<option value="205">San Marino</option>
<option value="209">Sao Tome and Principe</option>
<option value="194">Saudi Arabia</option>
<option value="206">Senegal</option>
<option value="191">Serbia</option>
<option value="250">Serbia and Montenegro</option>
<option value="196">Seychelles</option>
<option value="204">Sierra Leone</option>
<option value="199">Singapore</option>
<option value="211">Sint Maarten</option>
<option value="203">Slovakia</option>
<option value="201">Slovenia</option>
<option value="195">Solomon Islands</option>
<option value="207">Somalia</option>
<option value="247">South Africa</option>
<option value="90">South Georgia and the South Sandwich Islands</option>
<option value="122">South Korea</option>
<option value="68">Spain</option>
<option value="131">Sri Lanka</option>
<option value="197">Sudan</option>
<option value="208">Suriname</option>
<option value="202">Svalbard and Jan Mayen</option>
<option value="213">Swaziland</option>
<option value="198">Sweden</option>
<option value="43">Switzerland</option>
<option value="212">Syria</option>
<option value="228">Taiwan</option>
<option value="219">Tajikistan</option>
<option value="229">Tanzania</option>
<option value="218">Thailand</option>
<option value="217">Togo</option>
<option value="220">Tokelau</option>
<option value="224">Tonga</option>
<option value="226">Trinidad and Tobago</option>
<option value="223">Tunisia</option>
<option value="225">Turkey</option>
<option value="222">Turkmenistan</option>
<option value="214">Turks and Caicos Islands</option>
<option value="227">Tuvalu</option>
<option value="240">U.S. Virgin Islands</option>
<option value="231">Uganda</option>
<option value="230">Ukraine</option>
<option value="2">United Arab Emirates</option>
<option value="77">United Kingdom</option>
<option selected="selected" value="233">United States</option>
<option value="232">United States Minor Outlying Islands</option>
<option value="234">Uruguay</option>
<option value="235">Uzbekistan</option>
<option value="242">Vanuatu</option>
<option value="236">Vatican</option>
<option value="238">Venezuela</option>
<option value="241">Vietnam</option>
<option value="243">Wallis and Futuna</option>
<option value="66">Western Sahara</option>
<option value="245">Yemen</option>
<option value="248">Zambia</option>
<option value="249">Zimbabwe</option></select>
</div>
      </div>

      <div class="profileField">
	<label for="user_automatic_import">
	  <input name="user[automatic_import]" type="hidden" value="0" /><input type="checkbox" value="1" name="user[automatic_import]" id="user_automatic_import" />
	  Automatically Save Results Matching My Name, Age, and Home Town
</label>      </div>

      <div class="profileField" style="margin:10px 0px;">
        <span class="buttonContainer"><a class="btn btn-danger" data-no-turbolink="true" href="/races/index">Cancel</a></span>
        <span class="buttonContainer"><input type="submit" name="commit" value="Save" method="put" class="btn btn-success" /></span>
      </div>
</form>
</div>
</div>
    
    </main>
    </div> 
	</div>
	</body>
	</html>

Ответ 5

Вы должны изменить положение на абсолютное.

Update

Измените #profileContainer для этих 3:

position: absolute;
top: 0;
left: 0;

Удалить

-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

Update

Посмотрите, как вы центрируете элемент:

#container {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
  background: #000;
}
#cell {
  display: table-cell;
  vertical-align: middle;
  background: #ff0000;
}
#profileContainer {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  background: #fff;
}

<div id="container">
  <div id="cell">
    <div id="profileContainer">
      <h2>Profile Information</h2>
      <p>Form</p>
    </div>
  </div>
</div>

Ответ 6

Покажите дату рождения и HomeTown подробно ниже в мобильных устройствах (max-width: 768px).
Нет смысла показывать таблицу в центре страницы на мобильных устройствах. Итак, напишите все стили #profileContainer в запросе на медиа (@media (min-width: 768px)).

Ответ 7

Добавьте это к стилю элемента.

#profileContainer {
    overflow: scroll;
}

Кроме того, попробуйте вставить содержимое между div внутри div#profileContainer, если оно не работает.

Ответ 8

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

#profileContainer {
    border-radius: 25px;
    background: #ffffff;
    padding: 10px;
    width: 100%;
    max-width: 760px;
    display: inline-block;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    overflow: scroll;
    overflow-x: hidden;
    max-height: 70vh;
 }

Я сделал две вещи: сначала добавлена вертикальная прокрутка, а вторая указана максимальная высота, которую может отобразить #profileContainer, которая равна 70vh, т.е. 70% высоты порта представления. Вы можете настроить его в соответствии с вашими потребностями.

Ответ 9

Вы можете добавить этот css:

#profileContainer {overflow:auto; max-height:100%;}
html, body {height:100%; margin:0;}

JSFIDDLE

Ответ 10

Здесь вы... это кросс-браузерное решение, работает везде, проверено и протестировано, чисто css, no-js, чистое решение.

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

Я завернул все в оболочку table/table-cell (в стиле ниже)

<div class="profile-wrapper">
  <div>
    (..your elem)
  </div>
</div>

Затем создайте их следующим образом:

html, body {
  width:100%;
  height:100%;
  padding:0;
  margin:0;
}
.profile-wrapper {
  display:table;
  width:100%;
  height:100%;
}
.profile-wrapper > div {
  display:table-cell;
  width:100%;
  height:100%;
  vertical-align:middle;
  text-align:center;
}

Элементы html и body должны иметь высоту: 100% для достижения желаемого.

Что он делает, так это создание таблицы - и ее таблицы - внутри нее - которая занимает весь экран. Затем, используя text-align:center и vertical-align:middle, вы центрируете как по горизонтали, так и по вертикали любой элемент display:inline-block. Поскольку таблицы автоматически расширяются в зависимости от содержимого, в случае, если ваш элемент больше размеров таблицы, появляются полосы прокрутки.

Вот ваш обновленный скрипт.

http://jsfiddle.net/c9btschs/1/

Ответ 11

Добавьте следующие свойства CSS вместе с #profileContainer

  max-height: 85%;
  overflow: auto;

Это даст вам полосу прокрутки только в том случае, если содержимое переполнено, а 85% обеспечивает удобство и удобство отображения на всех экранах.

Рабочий пример JSFiddle

Ответ 12

Вам нужно просто изменить стили вашего контейнера профиля:

#profileContainer {
    border-radius: 25px;
    background: #ffffff;
    padding: 10px 2%;
    width: 96%;
    max-width: 760px;
    margin: 0 auto;
}

Попробуйте http://jsfiddle.net/kiroslim/tcou4dk3/10/!