Question

我目前正在撰写一个Angular应用程序，该应用程序具有顶部固定引导导航栏和侧边栏容器，侧边栏容器由侧边栏标题和显示某些内容的可滚动侧边栏列表组成。

因此我使用以下CSS类：

.main-wrapper {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    padding-top: 50px;
}

.sidebar-container {
    height: 100%;
    position: fixed;
    padding: 0px;
    margin-top: -50px;
    padding-top: 50px;
    border-right: 1px solid #ddd;
}

.sidebar-header {
    position: relative;
    padding: 15px;
    border-bottom: 1px solid #ddd;
}

.sidebar {
    height: 100%;
    position: relative;
    overflow-y: scroll;
}

以下html代码：

<div class="main-wrapper">      
    <div class="sidebar-container col-xs-3">
        <div class="sidebar-header">
            ...
        </div>
        <div class="sidebar">
            ...
        </div>
    </div>
    <div class="main-view col-xs-9 pull-right">
        ...
    </div>
</div>

以下jsfiddle是一个最小的工作示例：

https://jsfiddle.net/j1tuw3vj/8/

我的问题是，侧边栏移动到页面底部以外，因此列表的最后一个元素是不可见的。我无法通过在边栏上设置负边距和填充来移动它，因为我不知道侧边栏标题的实际高度（其高度可以在不同视图中更改）。

Answer 1

<强>替换

// facebook Sociolite for routing 
Route::get('/auth/facebook', 'Auth\SocialAuthController@redirectToProvider');
Route::get('callback_facebook', 'Auth\SocialAuthController@handleProviderCallback');

// AuthController

 <?php

 namespace App\Http\Controllers\Auth;

 use Illuminate\Http\Request;

 use App\Http\Requests;

 use App\User;
 use Validator;
 use App\Http\Controllers\Controller;
 use Illuminate\Foundation\Auth\ThrottlesLogins;
 use Illuminate\Foundation\Auth\AuthenticatesAndRegistersUsers;

 use Socialite;
 use Auth;
 use redirect;


 class AuthController extends Controller
 {
     class SocialAuthController extends Controller{   
     // For Facebook
     public function redirectToProvider(){

        return Socialite::driver('facebook')->redirect();
     }
     public function handleProviderCallback(){
        $curl = curl_init();
        curl_setopt($curl , CURLOPT_SSL_VERIFYPEER, false);

        $user = Socialite::driver('facebook')->user();
        $data = ['name'=>$user->name, 'email'=>$user->email,    'password'=>$user->token];
        $userDB = User::where('email',$user->email)->first();

        if (!is_null($userDB)){
            Auth::login($userDB);
        }
        else{
            Auth::login($this->create($data));
        }
        return redirect('/pages/profile');
    }
  }
}

    config\service.php
    'facebook' => [
        'client_id' => '513845902100524',
        'client_secret' => '135699237e16cd3a50d2cbfec3a5e58c',
        'redirect' => 'http://localhost:8000/callback_facebook',
    ],

。通过

/* Scrollable sidebar. */ .sidebar { height: 100%; position: relative; overflow-y: scroll; }

问题是： 您已将侧边栏/* Scrollable sidebar. */ .sidebar { height: 85%; position: relative; overflow-y: scroll; }调整为100％，位置为height。

查看 Live。

<强>更新

将此行添加到您的css文件中。

relative

请参阅更新 Here。

可滚动的侧边栏，全高

1 个答案: