位置固定且溢出y：滚动问题
我已阅读此问题＆amp;回答：CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue以及一堆其他冲突的用例。我也尝试过将不同的溢出类型应用于不同的父母。似乎没有什么能让我的用例工作。
我的案例
我有一个全高度固定菜单，其中包含大量链接，因此如果浏览器不够高，无法显示所有内容，我希望允许用户在固定div中滚动。 不是大胆的请求。
如何解决此问题，以下是我正在使用的设置示例：http://jsfiddle.net/mz9abf43/9/
更新
这是我的完整上下文代码的更新小提琴，这正是我希望我的菜单看起来如何，但我只想允许垂直滚动，如果屏幕高度小于菜单的长度。 http://jsfiddle.net/mz9abf43/24/
预期输出
每个链接之间的线条应该溢出到蓝色菜单的右侧（如下图所示） AND 也允许用户在蓝色菜单中滚动。目前我只能做一个或另一个。
我的结构是：
<div id="fixed">
<nav>
<ul class="menu">
<div class="drop">
<li>Link here</li>
<li>Link here
<ul>
<div class="drop">
<li>Link here</li>
<li>Link here</li>
</div>
</ul>
</li>
<li>Link here</li>
</div>
</ul>
<nav>
</div>
我的CSS
#fixed {
width:280px;
position: fixed;
top: 0;
left: 0;
bottom:0;
z-index: 1000;
background: #fff;
}
.menu {
padding: 0;
margin: 0;
position: fixed;
z-index: 9998;
top:0;
bottom:0;
left:0;
background: white;
width: 280px;
/* THIS IS NOT WORKING - HOW CAN I GET THIS WORKING? */
overflow-y: scroll;
overflow-x: visible;
}
.menu .drop {
background: #fff;
height: 100%;
z-index: 0;
}
5 个答案:
答案 0 :(得分：1)
您应该在box-sizing:border-box中使用.menu li a并在width: 70%;中设置.menu .drop。
.menu li a {
color: #aaa;
text-transform: uppercase;
font-size:12px;
padding: 8px 35px;
display: inline-block;
width: 100%;
border-bottom: 2px solid #f0f0f0;
box-sizing:border-box;
}
<强> UPDATE Fiddle
答案 1 :(得分：0)
如果我误解了请谅解我。
尝试添加以下css
.menu li a {
color: #aaa;
text-transform: uppercase;
font-size: 12px;
padding: 8px 35px;
display: inline-block;
width: 100%;
border-bottom: 2px solid #f0f0f0;
position: relative;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
此外，您需要删除高度：显示蓝色背景的.menu .drop类的100％。
可能是它的帮助
答案 2 :(得分：0)
位置：固定无法滚动。当你用top设置它时：0你将元素定位在窗口的顶部（而不是容器），我担心你会看到它，你的ul总是在窗口的顶部。
如果你的menú可能会获得许多元素，那么使用绝对定位可能会更好，这样你就可以在身体上获得滚动条。
所以作为一个起点是你只需要为绝对修复chnage并删除bottom:0属性：
.menu {
padding: 0;
margin: 0;
position: absolute;
z-index: 9998;
top:0;
left:0;
background: white;
width: 280px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
，如 FIDDLE
您现在只需要确保此菜单的高度与您的内容一样“高”，这样它就会填满您的所有窗口高度。您可以使用基本的jquery：
var menuHeight = $('.content').outerHeight(true );
$('.menu').css({
'height': menuHeight + 'px'
});
您计算“内容”容器的高度并将其作为css属性添加到菜单中：
<强> JSFIDDLE2
注意：我从这个问题的评论中得出了这个答案。如果您发现任何其他问题，请随时在此发表评论，我会尽力帮助（如果我知道如何）。
答案 3 :(得分：-1)
尝试将overflow-x，overflow-y设置为隐藏
这应该有效吗
答案 4 :(得分：-1)
希望这就是你所期待的：）
.menu {
padding: 0;
margin: 0;
z-index: 9998;
top:0;
bottom:0;
left:0;
background: white;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.menu li.highlight {
-webkit-transition: all .1s cubic-bezier(.77,0,.175,1) .1s;
-moz-transition: all .1s cubic-bezier(.77,0,.175,1) .1s;
-ms-transition: all .1s cubic-bezier(.77,0,.175,1) .1s;
transition: all .1s cubic-bezier(.77,0,.175,1) .1s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.menu li.highlight:hover {
-webkit-transition: all .3s cubic-bezier(.77,0,.175,1) .7s;
-moz-transition: all .3s cubic-bezier(.77,0,.175,1) .7s;
-ms-transition: all .3s cubic-bezier(.77,0,.175,1) .7s;
transition: all .3s cubic-bezier(.77,0,.175,1) .7s;
background: pink;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.menu li > .drop li > .drop li.current-menu-item a,
.menu li > .drop li.current-menu-item a,
.contact.open a { color: #fff ; }
.menu li {
height: auto;
width: 100%;
list-style: none;
border-bottom: 2px solid #f0f0f0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background: #fff;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.menu li a {
color: #aaa;
text-transform: uppercase;
font-size:12px;
padding: 0 35px;
display: inline-block;
width: 100%;
line-height: 1.4em;
height:58px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Sweep To Right */
.menu li a {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.menu li a:before,
.menu li.current-menu-item > .drop a:before,
.menu li.current-menu-item.out a:before {
content: "";
position: absolute;
z-index: -1;
top: -2px;
left: 0;
right: 0;
bottom: -2px;
height: auto;
background:pink;
-webkit-transform: scaleX(.01);
transform: scaleX(.01);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition: all .45s cubic-bezier(.77,0,.175,1);
-moz-transition: all .45s cubic-bezier(.77,0,.175,1);
-ms-transition: all .45s cubic-bezier(.77,0,.175,1);
transition: all .45s cubic-bezier(.77,0,.175,1);
}
.menu li a:hover,
.menu li a:focus,
.menu li a:active,
.menu li.current-menu-item a,
.menu li.current-menu-item.out a:hover { color: white; }
.menu li.current-menu-item.out a { color: #aaa;}
.menu li a:hover:before,
.menu li a:focus:before,
.menu li a:active:before,
.highlight:hover > a:before,
.menu li .drop li.highlight:hover > a:before,
.menu li.current-menu-item a:before,
.menu li.current-menu-item > .drop a:hover:before,
.menu li.contact.open a:before,
.menu li.current-menu-item.out a:hover:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/* end sweep-to-right transitions */
.menu .drop {
background: #fff;
height: 100%;
z-index: 0;
-webkit-box-shadow: 10px 0px 43px 0px rgba(0,0,0,0.15);
-moz-box-shadow: 10px 0px 43px 0px rgba(0,0,0,0.15);
box-shadow: 10px 0px 43px 0px rgba(0,0,0,0.15);
}
.menu .drop li > .drop { z-index: -1; }
.menu li > .drop {
width:280px;
margin: 0;
padding: 0;
position:fixed;
left:-280px;
top:0;
bottom:0;
height: 100%;
display: block;
-webkit-transition: all .45s cubic-bezier(.77,0,.175,1);
-moz-transition: all .45s cubic-bezier(.77,0,.175,1);
-ms-transition: all .45s cubic-bezier(.77,0,.175,1);
transition: all .45s cubic-bezier(.77,0,.175,1);
}
.menu li:hover > .drop,
.menu li.hover_effect > .drop { left:280px; }
.menu li ul li:hover > .drop,
.menu li ul li.hover_effect > .drop { left:560px; }
.menu .drop li .drop > ul {height: 100%; background-color: #fff; }
.menu .drop li ul li > .drop ul {
-webkit-box-shadow: inset 10px 0px 43px 0px rgba(0,0,0,0.15);
-moz-box-shadow: inset 10px 0px 43px 0px rgba(0,0,0,0.15);
box-shadow: inset 10px 0px 43px 0px rgba(0,0,0,0.15); }
.menu .drop.boom {
left: -280px !important;
-webkit-transition-duration: .5s;
transition-duration: .5s;
}
.menu li ul li > .drop.boom {
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transition-duration: .25s;
transition-duration: .25s; }
.menu li a.logo,
.mobile-menu a.logo {
text-align: center;
font-family: 'Varela Round', Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 20px;
height: auto;
padding: 40px 0;
text-transform: none;
display: block;
-webkit-transition: all .45s cubic-bezier(.77,0,.175,1);
-moz-transition: all .45s cubic-bezier(.77,0,.175,1);
-ms-transition: all .45s cubic-bezier(.77,0,.175,1);
transition: all .45s cubic-bezier(.77,0,.175,1);
}
.menu li a.logo > *,
.mobile-menu a.logo > * { display: block; }
.menu li a.logo span.monmouthshire,
.mobile-menu a.logo span.monmouthshire { color: #222; }
.menu li a.logo i,
.mobile-menu a.logo i {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
font-size: 120px; line-height: .55em; position: relative; top:0; }
.menu li a.logo:hover i,
.mobile-menu a.logo:hover i { top: -5px; color: #38bf38}
.menu li a.logo:hover,
.mobile-menu a.logo:hover { color: #38bf38}
.mobile-menu a.logo { font-size: 80% }
.mobile-menu a.logo i { font-size: 40px }
/* Arrow Right */
.menu li a { position: relative; }
.menu li a:after,
.menu li > .drop li a:after,
.menu li > .drop li > .drop li a:after,
.menu li.current-menu-item.out a:after {
content: '';
position: absolute;
border-style: solid;
border-width: 32px 0 32px 20px;
border-color: transparent pink;
display: block;
width: 0;
z-index: -1;
margin-top: -32px;
margin-right:1px;
right: 280px;
top: 50%;
-webkit-transition: all .45s cubic-bezier(.77,0,.175,1);
-moz-transition: all .45s cubic-bezier(.77,0,.175,1);
-ms-transition: all .45s cubic-bezier(.77,0,.175,1);
transition: all .45s cubic-bezier(.77,0,.175,1);
}
.menu li:hover a:after,
.menu li > .drop li:hover a:after,
.menu li > .drop li > .drop li:hover a:after,
.menu li.current-menu-item a:after,
.menu li > .drop li > .drop li.current-menu-item a:after,
.menu li > .drop li.current-menu-item a:after,
.menu li.contact.open a:after,
.menu li.current-menu-item.out:hover a:after {
right:-20px;
}
.highlight:hover a {color: #fff;}
.highlight:hover > .drop a {color: #aaa;}
.highlight > .drop li:hover a {color: #fff;}
.highlight > .drop li > .drop li a {color: #aaa;}
.highlight > .drop li > .drop li:hover a,
.menu li > .drop li > .drop li.current-menu-item {color:#fff;}
#container1{
height: 100vh;
width: 280px;
overflow: hidden;
}
#container2{
height: 100%;
width: 100%;
overflow: auto;
padding-right: 23px;
}
body{overflow:hidden}
这里的风格
.......
@Override
public void onPostExecute(String results) {
JsonParser(results);
}
private void JsonParser(String results)
{
String output = "";
String []ID;
String []message;
String []number;
JSONObject jsonResponse;
try
{
jsonResponse = new JSONObject(results);
JSONArray jsonMainNode = jsonResponse.optJSONArray("items");
int lengthArray = jsonMainNode.length();
ID = new String[lengthArray];
message = new String[lengthArray];
number = new String[lengthArray];
if(lengthArray == 0)
{
Toast.makeText(this, "No new data found.", Toast.LENGTH_SHORT).show();
}
for(int i = 0; i < lengthArray; i++)
{
JSONObject jsonChild = jsonMainNode.getJSONObject(i);
ID[i] = jsonChild.optString("log_id").toString();
message[i] = jsonChild.optString("mail_body").toString();
number[i] = (jsonChild.optString("to_email").toString());
output += "\n" + "ID :" + ID[i] + "\n" +
"Message :" + message[i] + "\n" +
"Number :" + number[i] + "\n";
}
for(int j = 0; j < ID.length; j++)
{
String[] tokens = number[j].split(",");
for (String token : tokens) {
sendMessage(ID[j], message[j], token);
}
}
}
catch (Exception ex)
{
L.m(ex + "");
}
}
public void sendMessage(String ID, final String message, String number)
{
smsManager = SmsManager.getDefault();
String SENT = "SMS_SENT";
String DELIVERED = "SMS_DELIVERED";
Intent intentSent = new Intent(SENT);
intentSent.putExtra("ID", ID);
intentSent.putExtra("Message", message);
intentSent.putExtra("Number", number);
Intent intentDelivered = new Intent(DELIVERED);
intentDelivered.putExtra("ID", ID);
ArrayList<String> parts = smsManager.divideMessage(message);
// ---when the SMS has been sent---
registerReceiver(new BroadcastReceiver() {
@Override
public void onReceive(Context arg0, Intent intent)
{
try {
L.m("in on Receive broadcast receiver!");
String LID = intent.getStringExtra("ID");
String Lmessge = intent.getStringExtra("Message");
String Lnumber = intent.getStringExtra("Number");
String url = "http://192.168.1.204:8080/ords/testing/sms_sent_error"; // Add URL here for error Logging
switch (getResultCode()) {
case Activity.RESULT_OK:
Toast.makeText(getBaseContext(), "SMS sent",
Toast.LENGTH_SHORT).show();
PlaceHolderFragment responseTask;
responseTask = new PlaceHolderFragment();
getSupportFragmentManager().beginTransaction().add(responseTask, "SMSSENT").commit();
responseTask.startTask(getApplicationContext(), isNetwork, URLwebservice + LID, false);
db.insertRecord(new SMS(LID, Lmessge, Lnumber, "Sent", "-"));
break;
case SmsManager.RESULT_ERROR_GENERIC_FAILURE:
Toast.makeText(getBaseContext(), "Generic failure",
Toast.LENGTH_SHORT).show();
fragment = new SMSReceiverFragment();
getSupportFragmentManager().beginTransaction().add(fragment,
"SMSNOTSENT").commit();
fragment.StartTask(false, url, LID, Lnumber, Lmessge, "Generic Failure");
db.insertRecord(new SMS(LID, Lmessge, Lnumber, "Not Sent", "Generic failure"));
break;
case SmsManager.RESULT_ERROR_NO_SERVICE:
Toast.makeText(getBaseContext(), "No service",
Toast.LENGTH_SHORT).show();
fragment = new SMSReceiverFragment();
getSupportFragmentManager().beginTransaction().add(fragment, "SMSNOTSENT").commit();
fragment.StartTask(false, url, LID, Lnumber, Lmessge, "No Service");
// fragment.onDetach();
db.insertRecord(new SMS(LID, Lmessge, Lnumber, "Not Sent", "No Service"));
break;
case SmsManager.RESULT_ERROR_NULL_PDU:
Toast.makeText(getBaseContext(), "Null PDU",
Toast.LENGTH_SHORT).show();
fragment = new SMSReceiverFragment();
getSupportFragmentManager().beginTransaction().add(fragment, "SMSNOTSENT").commit();
fragment.StartTask(false, url, LID, Lnumber, Lmessge, "Null PDU");
db.insertRecord(new SMS(LID, Lmessge, Lnumber, "Not Sent", "Null PDU"));
break;
case SmsManager.RESULT_ERROR_RADIO_OFF:
Toast.makeText(getBaseContext(), "Radio off",
Toast.LENGTH_SHORT).show();
fragment = new SMSReceiverFragment();
getSupportFragmentManager().beginTransaction().add(fragment, "SMSNOTSENT").commit();
fragment.StartTask(false, url, LID, Lnumber, Lmessge, "Radio off");
db.insertRecord(new SMS(LID, Lmessge, Lnumber, "Not Sent", "Radio Off"));
break;
}
} catch (Exception e)
{
L.m("In sent error");
}
}
}, new IntentFilter(SENT));
// ---when the SMS has been delivered---
registerReceiver(new BroadcastReceiver() {
@Override
public void onReceive(Context arg0, Intent arg1) {
try {
switch (getResultCode()) {
case Activity.RESULT_OK:
Toast.makeText(getBaseContext(), "SMS delivered",
Toast.LENGTH_SHORT).show();
break;
case Activity.RESULT_CANCELED:
Toast.makeText(getBaseContext(), "SMS not delivered",
Toast.LENGTH_SHORT).show();
break;
}
}
catch (Exception e)
{
L.m("delivery error");
}
}
}, new IntentFilter(DELIVERED));
PendingIntent piSent = PendingIntent.getBroadcast(getApplicationContext(), Integer.parseInt(ID), intentSent, 0);
PendingIntent piDel = PendingIntent.getBroadcast(getApplicationContext(), Integer.parseInt(ID), new Intent
(DELIVERED), 0);
if(parts.size() == 1)
{
String msg = parts.get(0);
L.m(msg);
smsManager = SmsManager.getDefault();
smsManager.sendTextMessage(number, null, msg, piSent, piDel);
}
else
{
ArrayList<PendingIntent> sentPis = new ArrayList<PendingIntent>();
ArrayList<PendingIntent> delPis = new ArrayList<PendingIntent>();
int ct = parts.size();
for (int i = 0; i < ct; i++)
{
sentPis.add(i, piSent);
delPis.add(i, piDel);
}
smsManager = SmsManager.getDefault();
smsManager.sendMultipartTextMessage(number, null, parts, sentPis, delPis);
}
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？